<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> html,body { margin:0; height:100%; } #test { 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 { 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>