<!DOCTYPE html> <html > <head> <title>DIV CSS遮罩层</title> <script language="javascript" type="text/javascript"> function showdiv() { document.getElementById("bg").style.display ="block"; document.getElementById("show").style.display ="block"; } function hidediv() { document.getElementById("bg").style.display ='none'; document.getElementById("show").style.display ='none'; } </script> <style type="text/css"> #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:10; -moz-opacity: 0.7; //透明度 opacity:0.7; //透明度 <!-- filter: alpha(opacity=70);} --> //滤镜 #show{display: none; position: absolute; top: 25%; left: 20%; width: 53%; height: 49%; padding: 38px; border: 8px solid red; background-color: yellow; z-index:1002; overflow: auto;} </style> </head> <body> <div id="bg"></div> <input id="btnshow" type="button" value="Show" onclick="showdiv();"/> <div id="bg"></div> <div id="show">测试 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/> </div> </body> </html>
点击遮罩关闭遮罩和弹出框:
<pre name="code" class="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DIV CSS遮罩层</title> <script language="javascript" type="text/javascript"> function showdiv() { document.getElementById("bg").style.display = "block"; document.getElementById("show").style.display = "block"; } function hidediv() { document.getElementById("bg").style.display = 'none'; document.getElementById("show").style.display = 'none'; } function bgshow() { //点击遮罩关闭遮罩和弹出框: document.getElementById("bg").style.display = 'none'; document.getElementById("show").style.display = 'none'; } </script> <style type="text/css"> #bg { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 10; -moz-opacity: 0.7; //透明度 opacity: 0.7; //透明度 /* filter: alpha(opacity=70); //滤镜 */ } #show { display: none; position: absolute; top: 25%; left: 20%; width: 53%; height: 49%; padding: 38px; border: 8px solid red; background-color: yellow; z-index: 1002; overflow: auto; } </style> </head> <body> <input id="btnshow" type="button" value="Show" onclick="showdiv();" /> <div id="bg" onclick="bgshow();"></div> <div id="show">测试 <input id="btnclose" type="button" value="Close" onclick="hidediv();" /> </div> </body> </html>