本文转载自：/dige1993/p/4606032.html 作者：dige1993 转载请注明该声明。
利用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>
