利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏div</title>
<style>
html,body {
margin:0;
height:100%;
}
#test {
width:100%;
height:100%;
background-color:#000;
position:absolute;
top:0;
left:0;
z-index:2;
opacity:0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display:none;
}
#log_window {
width:200px;
height:200px;
background-color:#FF0;
margin: auto;
position: absolute;
z-index:3;
top: 0;
bottom: 0;
left: 0;
right: 0;
display:none;
}
</style>
<script>
function shield(){
var s = document.getElementById("test");
s.style.display = "block";
var l = document.getElementById("log_window");
l.style.display = "block";
}
function cancel_shield(){
var s = document.getElementById("test");
s.style.display = "none";
var l = document.getElementById("log_window");
l.style.display = "none";
}
</script>
</head>
<body>
<a href="javascript:shield()">打开遮罩</a>
<div id="test"></div>
<div id="log_window">
<a href="javascript:cancel_shield()">关闭</a>
</div>
</body>
</html>
时间： 2024-10-13 02:41:46