實現局部遮罩與關閉

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>