利用JavaScript做的遮罩

最新推荐文章于 2023-07-22 17:01:56 发布

weixin_30412013

最新推荐文章于 2023-07-22 17:01:56 发布

阅读量90

点赞数

原文链接：http://www.cnblogs.com/he1229/archive/2012/08/26/2657503.html

版权

遮罩

 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>