利用JavaScript做的遮罩
遮罩
1 <script type="text/javascript"> 2 //遮罩方法 3 function shade(){ 4 var div = document.getElementById("shade"); 5 //遮罩层样式 6 div.className = "a"; 7 div.style.display = "block"; 8 } 9 //取消遮罩方法 10 function shadeDisplay(){ 11 var div = document.getElementById("shade"); 12 div.style.display = "none"; 13 } 14 </script> 15 <style type="text/css"> 16 #div{ 17 width:400px; 18 height:300px; 19 margin:0px auto; 20 border:1px solid #000; 21 /*使子元素的坐标以父元素的左上角坐标为原点(0,0)*/ 22 position:relative; 23 } 24 .a{ 25 width:400px; 26 height:300px; 27 position:absolute; 28 left:0px; 29 top:0px; 30 z-index:999; 31 background-color:red; 32 //不同的浏览器的遮罩层的透明度 33 -moz-opacity:0.5;/*Firefox*/ 34 opacity:0.5;/*Opera*/ 35 filter:alpha(opacity=50); /*IE*/ 36 } 37 </style> 38 <body> 39 <body> 40 <div id="div">//被遮罩层 41 <a href="http://www.baidu.com">百度</a> 42 <br/> 43 <div id="shade">//遮罩层 44 </div> 45 <a href="javascript:shade()">遮罩</a> 46 </div> 47 <a href="javascript:shadeDisplay()">取消遮罩</a> 48 </body>
遮罩是非常有用的 比如我们在做弹出层时,就要很广泛的使用遮罩。使用遮罩后,被遮罩的部分不能被使用。