遮罩层的应用实例

View Code
 1 function shade(){
 2         
 3         var div = document.getElementById("shade");
 4         div.className = "s";
 5         div.style.display = "block";
 6     }
 7     function shadeDisplay(){
 8 
 9         var div = document.getElementById("shade");
10         div.style.display = "none";
11     }
12 </script>
13 <style type="text/css">
14     #box{
15         width:400px;
16         height:300px;
17         margin:0px auto;
18         border:1px solid #000;
19         /*使子元素的坐标以父元素的左上角坐标为远点(0,0)*/
20         position:relative;
21     }
22     .s{
23         width:400px;
24         height:300px;
25         background-color:gray;
26         position:absolute;
27         left:0px;
28         top:0px;
29         z-index:999;
30         -moz-opacity:0.5;/*Firefox*/
31         opacity:0.5;/*Opera*/
32         filter:alpha(opacity=50); /*IE*/
33     }
34 </style>
35 </head>
36 
37 <body>
38     <div id="box">
39         <a href="javascript:shade()">遮罩</a>
40         <div id="shade"></div>
41     </div>
42 <a href="javascript:shadeDisplay()">遮罩消失</a>
43     
44 </body>
posted on 2012-07-31 19:32 午后の時間阅读(212) 评论(0) 收藏举报