利用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>