div+css實現簡單的彈出窗(背景變灰色)
阿新 • • 發佈:2019-01-26
自己做了一個網站,需要用到彈出框的功能,以前沒做過這個,就去網上查了下資料,然後試著寫了一個最簡單的彈出框效果。
需求:點選彈出框按鈕,在原頁面基礎上彈出一個彈出框,並且背景要變成灰色,原頁面不能被編輯知道關閉彈出框。
原理:在原頁面的基礎上新增兩個div,一個是彈出框,一個是彈出框後面的背景層(頁面變灰)。首先這兩個div是跟原頁面的程式碼在一起存放的,只不過使用了display:none
這個css屬性先將其隱藏不顯示,在觸發彈出框效果時再使用display:block
讓這兩個div顯示出來即可。
完整程式碼如下:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>div+css實現彈出層</title>
<style>
#popBox{
position: absolute;
display:none;
width:300px;
height:200px;
left:40%;
top:20%;
z-index:11;
background:#B8F764;
}
#popLayer{
position: absolute;
display:none;
left:0;
top:0;
z-index:10;
background:#DCDBDC;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);/* 只支援IE6、7、8、9 */
}
</style>
<script type="text/javascript">
function popBox(){
var popBox = document.getElementById('popBox' );
var popLayer = document.getElementById('popLayer');
popLayer.style.width = document.body.scrollWidth + "px";
popLayer.style.height = document.body.scrollHeight + "px";
popLayer.style.display = "block";
popBox.style.display = "block";
}//end func popBox()
function closeBox(){
var popBox = document.getElementById('popBox');
var popLayer = document.getElementById('popLayer');
popLayer.style.display = "none";
popBox.style.display = "none";
}//end func closeBox()
</script>
</head>
<body>
<input type="button" name="popBox" value="彈出框" onclick="popBox()" />
<div id="popLayer" >
背景層
</div>
<div id="popBox" >
<div><a href="javascript:void(0)" onclick="closeBox()">關閉</a></div>
<div>彈出框</div>
</div>
</body>
</html>
效果圖如下:
原頁面:
彈出框:
其他需要注意事項:1、兩個彈出層的上下位置;2、彈出的背景層的透明設定;
首先,兩個div都要使用position: absolute;
這個屬性,然後使用z-index這個屬性可以設定層的上下順序,值越大越靠上顯示;
其次,背景透明需要使用濾鏡等功能,具體程式碼如下:
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);/* 只支援IE6、7、8、9 */
3、如果頁面高度超過螢幕高度,彈出的背景層只有螢幕大小,這是因為使用了position:absolute;的話高度width:100%;就無效了。解決辦法,使用js獲取頁面的寬度和高度進行設定。