实现局部遮罩与关闭

View Code 
 1 //实现局部遮罩
 2 <script type="text/javascript">
 3     function Shade(){
 4         var s = document.getElementById("shade");
 5         s.style.display = "block";
 6     }
 7     function Display(){
 8         var d = document.getElementById("shade");
 9         d.style.display = "none";
10     }
11 </script>
12 <style type="text/css">
13 #box{
14     width:400px;
15     height:300px;
16     position:relative;
17     margin:0px auto;
18     border:1px solid #000;
19 }
20 #shade{
21     width:400px;
22     height:300px;
23     background-color:gray;
24     position:absolute;
25     z-index:999;
26     left:0px;
27     top:0px;
28     -moz-opacity:0.5;/*Firefox*/
29     opacity:0.5;/*Opera*/
30     filter:alpha(opacity=50); /*IE*/
31 }
32 </style>
33 </head>
34 
35 <body>
36     <div id = "box">
37         <a href = "javascript:Shade()">局部遮罩</a>
38         <div id = "shade"></div>
39     </div>
40 <a href = "javascript:Display()">遮罩消失</a>
41 </body>

 

posted @ 2012-08-01 19:25  晓 漪  阅读(469)  评论(0)    收藏  举报