这段代码是通过lightbox2.02的源代码里面学习来的,主要要注意的地方是如果用overlayer包裹loadlayer层的话,loadlayer层会继承overlayer层的透明属性,而且这种继承后的透明属性很难屏蔽掉,比如在loadlayer上重新定义透明,新定义的透明不会有预期的效果.所以处理的时候必须要overlayer与loadbox分离来,单独来处理就不会出现上面的情况了.
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: <title>loading demo</title>
6: <script type="text/javascript">
7: function show(){
8: var loadbox =document.getElementById("loadlayer");
9: var overlayer = document.getElementById("overlayer");
10: loadbox.style.display = "block" ;
11: overlayer.style.display = "block" ;
12: }
13:
14: function hide(){
15: var loadbox =document.getElementById("loadlayer");
16: var overlayer = document.getElementById("overlayer");
17: loadbox.style.display = "none" ;
18: overlayer.style.display = "none" ;
19: }
20: </script>
21:
22: <style type="text/css">
23: #overlayer{
24: position: absolute;
25: top: 50px;
26: left: 0;
27: z-index: 90;
28: width: 100%;
29: height: 100%;
30: background-color: #000;
31: filter:alpha(opacity=60);
32: -moz-opacity: 0.6;
33: opacity: 0.6;
34: display:none;
35: }
36:
37: #loadbox{
38: position: absolute;
39: top: 40%;
40: left: 0;
41: width: 100%;
42: z-index: 100;
43: text-align: center;
44: }
45:
46: #loadlayer{
47: display:none;
48: }
49:
50: </style>
51: </head>
52: <body>
53: <div id="overlayer"></div>
54: <div id="loadbox" >
55: <div id="loadlayer">
56: <img src="loading.gif" />
57: </div>
58: </div>
59: <div id="containlayer">
60: <input type="button" value="show" onclick="show()" />
61: <input type="button" value="hide" onclick="hide()"/>
62: <br />
63: <br />
64: --------------------------------------------------------------------<br />
65: --------------------------------------------------------------------<br />
66: 具体的网页内容.写在这里,上面通过一个半透明层遮蔽下面的内容<br />
67: </div>
68: </body>
69: </html>