http://www.iteye.com/topic/339585
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. 这段代码是通过lightbox2.02的源代码里面学习来的,主要要注意的地方是如果用overlayer包裹
67. loadlayer层的话,loadlayer层会继承overlayer层的透明属性,而且这种继承后的透明属性很难屏蔽掉,
68. 比如在loadlayer上重新定义透明,新定义的透明不会有预期的效果.所以处理的时候必须要overlayer
69. 与loadbox分离来,单独来处理就不会出现上面的情况了.
70. 具体的网页内容.写在这里,上面通过一个半透明层遮蔽下面的内容<br />
71. </div>
72. </body>
73. </html>