這段代碼是通過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>