遮蔽层的实现

gundumw100 · 发表于 2013-2-7 20:01:29

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" /> 61. <input type="button" value="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>

		自动登录	找回密码
密码			立即注册