js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法
更新時(shí)間：2015年02月26日 15:38:44 作者：代碼家園
這篇文章主要介紹了js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法,涉及javascript操作彈出div層的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+CSS彈出居中的背景半透明div層</title>
<style type="text/css">
body{margin:0px;}
#bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}
#popbox{position:absolute;width:400px; height:400px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#666666;}
</style>
<script type="text/javascript">
function pupopen(){
document.getElementById("bg").style.display="block";
document.getElementById("popbox").style.display="block" ;
}
function pupclose(){
document.getElementById("bg").style.display="none";
document.getElementById("popbox").style.display="none" ;
}
</script>
</head>
<body>
</br>
CSS彈出層，或者說(shuō)是彈出窗口，背景半透明風(fēng)格的彈出框，</br>在網(wǎng)站登錄、用戶注冊(cè)、公告提示方面都非常適合使用。</br>IE和FF,OP均可以~彈出窗口,背景半透明 </br>
原理:兩個(gè)層,一個(gè)高度和寬度都是100%,另一個(gè)就是你要彈出的窗口的具體內(nèi)容,</br>半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
</br></br> <a href="#" onclick="pupopen()">點(diǎn)擊這里打開(kāi)窗口</a>
<div id="bg"></div>
<div id="popbox">兩個(gè)層,一個(gè)高度和寬度都是100%,另一個(gè)就是你要彈出的窗口的具體內(nèi)容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
<br>
<br>
<br>
<a href="#" onclick="pupclose()">點(diǎn)擊關(guān)閉窗口</a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+CSS彈出居中的背景半透明div層</title>
<style type="text/css">
body{margin:0px;}
#bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}
#popbox{position:absolute;width:400px; height:400px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#666666;}
</style>
<script type="text/javascript">
function pupopen(){
document.getElementById("bg").style.display="block";
document.getElementById("popbox").style.display="block" ;
}
function pupclose(){
document.getElementById("bg").style.display="none";
document.getElementById("popbox").style.display="none" ;
}
</script>
</head>
<body>
</br>
CSS彈出層，或者說(shuō)是彈出窗口，背景半透明風(fēng)格的彈出框，</br>在網(wǎng)站登錄、用戶注冊(cè)、公告提示方面都非常適合使用。</br>IE和FF,OP均可以~彈出窗口,背景半透明 </br>
原理:兩個(gè)層,一個(gè)高度和寬度都是100%,另一個(gè)就是你要彈出的窗口的具體內(nèi)容,</br>半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
</br></br> <a href="#" onclick="pupopen()">點(diǎn)擊這里打開(kāi)窗口</a>
<div id="bg"></div>
<div id="popbox">兩個(gè)層,一個(gè)高度和寬度都是100%,另一個(gè)就是你要彈出的窗口的具體內(nèi)容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
<br>
<br>
<br>
<a href="#" onclick="pupclose()">點(diǎn)擊關(guān)閉窗口</a>
</div>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript中活靈活現(xiàn)的Array對(duì)象詳解
本文的內(nèi)容就如同標(biāo)題一樣，這篇文章將會(huì)靈活的運(yùn)行Array對(duì)象的一些方法來(lái)實(shí)現(xiàn)看上去較復(fù)雜的應(yīng)用。相信對(duì)大家學(xué)習(xí)或者理解javascript中的Array對(duì)象能具有一定的參考借鑒價(jià)值，有需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
關(guān)于layui 實(shí)現(xiàn)點(diǎn)擊按鈕添加一行(方法渲染創(chuàng)建的table)
今天小編就為大家分享一篇關(guān)于layui 實(shí)現(xiàn)點(diǎn)擊按鈕添加一行(方法渲染創(chuàng)建的table)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS中split()用法（將字符串按指定符號(hào)分割成數(shù)組）
這篇文章主要介紹了JS中split()用法（將字符串按指定符號(hào)分割成數(shù)組）的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
深入學(xué)習(xí)JavaScript對(duì)象
今天小編就和大家深入學(xué)習(xí)JavaScript對(duì)象，感興趣的小伙伴們可以參考一下，大家一起學(xué)習(xí)。2015-10-10
這篇文章主要為大家詳細(xì)介紹了js cookie實(shí)現(xiàn)記住密碼功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了詳解Webpack-dev-server的proxy用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
下面小編就為大家?guī)?lái)一篇js捕捉鍵盤(pán)事件和按鍵鍵值的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
uniapp小程序之配置首頁(yè)搜索框功能的實(shí)現(xiàn)
這篇文章主要介紹了uniapp小程序之配置首頁(yè)搜索框,我們介紹一下本次開(kāi)發(fā)使用的是uniapp，本次分享內(nèi)容的搜索框?yàn)榻馆斎胨阉骺?，點(diǎn)擊跳轉(zhuǎn)專屬搜索頁(yè)面，需要的朋友可以參考下2022-09-09
IE和Mozilla的兼容性匯總event，需要的朋友可以參考下。2007-08-08
這篇文章主要介紹了詳解Howler.js Web音頻播放終極解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08