js+CSS實現(xiàn)彈出居中背景半透明div層的方法
更新時間：2015年02月26日 15:38:44 作者：代碼家園
這篇文章主要介紹了js+CSS實現(xiàn)彈出居中背景半透明div層的方法,涉及javascript操作彈出div層的操作技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js+CSS實現(xiàn)彈出居中背景半透明div層的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<!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彈出層，或者說是彈出窗口，背景半透明風格的彈出框，</br>在網(wǎng)站登錄、用戶注冊、公告提示方面都非常適合使用。</br>IE和FF,OP均可以~彈出窗口,背景半透明 </br>
原理:兩個層,一個高度和寬度都是100%,另一個就是你要彈出的窗口的具體內(nèi)容,</br>半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
</br></br> <a href="#" onclick="pupopen()">點擊這里打開窗口</a>
<div id="bg"></div>
<div id="popbox">兩個層,一個高度和寬度都是100%,另一個就是你要彈出的窗口的具體內(nèi)容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
<br>
<br>
<br>
<a href="#" onclick="pupclose()">點擊關(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彈出層，或者說是彈出窗口，背景半透明風格的彈出框，</br>在網(wǎng)站登錄、用戶注冊、公告提示方面都非常適合使用。</br>IE和FF,OP均可以~彈出窗口,背景半透明 </br>
原理:兩個層,一個高度和寬度都是100%,另一個就是你要彈出的窗口的具體內(nèi)容,</br>半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
</br></br> <a href="#" onclick="pupopen()">點擊這里打開窗口</a>
<div id="bg"></div>
<div id="popbox">兩個層,一個高度和寬度都是100%,另一個就是你要彈出的窗口的具體內(nèi)容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
<br>
<br>
<br>
<a href="#" onclick="pupclose()">點擊關(guān)閉窗口</a>
</div>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關(guān)文章
javascript中活靈活現(xiàn)的Array對象詳解
本文的內(nèi)容就如同標題一樣，這篇文章將會靈活的運行Array對象的一些方法來實現(xiàn)看上去較復雜的應用。相信對大家學習或者理解javascript中的Array對象能具有一定的參考借鑒價值，有需要的朋友們下面跟著小編一起來學習學習吧。2016-11-11
關(guān)于layui 實現(xiàn)點擊按鈕添加一行(方法渲染創(chuàng)建的table)
今天小編就為大家分享一篇關(guān)于layui 實現(xiàn)點擊按鈕添加一行(方法渲染創(chuàng)建的table)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS中split()用法（將字符串按指定符號分割成數(shù)組）
這篇文章主要介紹了JS中split()用法（將字符串按指定符號分割成數(shù)組）的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-10-10
今天小編就和大家深入學習JavaScript對象，感興趣的小伙伴們可以參考一下，大家一起學習。2015-10-10
這篇文章主要為大家詳細介紹了js cookie實現(xiàn)記住密碼功能的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了詳解Webpack-dev-server的proxy用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
下面小編就為大家?guī)硪黄猨s捕捉鍵盤事件和按鍵鍵值的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了uniapp小程序之配置首頁搜索框,我們介紹一下本次開發(fā)使用的是uniapp，本次分享內(nèi)容的搜索框為禁止輸入搜索框，點擊跳轉(zhuǎn)專屬搜索頁面，需要的朋友可以參考下2022-09-09
IE和Mozilla的兼容性匯總event，需要的朋友可以參考下。2007-08-08
這篇文章主要介紹了詳解Howler.js Web音頻播放終極解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08