- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>loading demo</title>
- <script type="text/javascript">
- function show(){
- var loadbox =document.getElementById("loadlayer");
- var overlayer = document.getElementById("overlayer");
- loadbox.style.display = "block" ;
- overlayer.style.display = "block" ;
- }
- function hide(){
- var loadbox =document.getElementById("loadlayer");
- var overlayer = document.getElementById("overlayer");
- loadbox.style.display = "none" ;
- overlayer.style.display = "none" ;
- }
- </script>
- <style type="text/css">
- #overlayer{
- position: absolute;
- top: 50px;
- left: 0;
- z-index: 90;
- width: 100%;
- height: 100%;
- background-color: #000;
- filter:alpha(opacity=60);
- -moz-opacity: 0.6;
- opacity: 0.6;
- display:none;
- }
- #loadbox{
- position: absolute;
- top: 40%;
- left: 0;
- width: 100%;
- z-index: 100;
- text-align: center;
- }
- #loadlayer{
- display:none;
- }
- </style>
- </head>
- <body>
- <div id="overlayer"></div>
- <div id="loadbox" >
- <div id="loadlayer">
- <img src="loading.gif" />
- </div>
- </div>
- <div id="containlayer">
- <input type="button" value="show" onclick="show()" />
- <input type="button" value="hide" onclick="hide()"/>
- <br />
- <br />
- --------------------------------------------------------------------<br />
- --------------------------------------------------------------------<br />
- 这段代码是通过lightbox2.02的源代码里面学习来的,主要要注意的地方是如果用overlayer包裹
- loadlayer层的话,loadlayer层会继承overlayer层的透明属性,而且这种继承后的透明属性很难屏蔽掉,
- 比如在loadlayer上重新定义透明,新定义的透明不会有预期的效果.所以处理的时候必须要overlayer
- 与loadbox分离来,单独来处理就不会出现上面的情况了.
- 具体的网页内容.写在这里,上面通过一个半透明层遮蔽下面的内容<br />
- </div>
- </body>
- </html>