一大特点是JS遮罩层可以覆盖到滚动条,弊端就是如果body设置有背景 那背景是不会随着滚动条滚动的,也是一大特色 演示如下
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
6 <title>test</title>
7 <style type="text/css">
8 html {
9 overflow:hidden;
10 width:100%;
11 height:100%;
12 }
13 body {
14 width:100%;
15 height:100%;
16 margin:0px;
17 overflow-y:scroll;
18 }
19 #mask {
20 width:100%;
21 height:100%;
22 position:absolute;
23 top:0;
24 left:0;
25 z-index:100;
26 background:#000;
27 filter:Alpha(opacity=30);
28 opacity:0.3;
29 display:none;
30 }
31 </style>
32 </head>
33 <body>
34 <div style="height:1000px"><button onclick="document.getElementById('mask').style.display = 'block'">显示</button></div>
35 <div id="mask" ondblclick="this.style.display = 'none'"></div>
36 </body>
37 </html>