遮蔽层的实现

最新推荐文章于 2017-06-23 09:36:00 发布

gundumw100

最新推荐文章于 2017-06-23 09:36:00 发布

阅读量454

点赞数

分类专栏： XHTML HTML

本文链接：https://blog.csdn.net/gundumw100/article/details/69952133

版权

HTML 同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

XHTML

21 篇文章 0 订阅

订阅专栏

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" οnclick="show()" />  
  61.         <input type="button" value="hide" οnclick="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>

gundumw100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
遮蔽层的实现

http://www.iteye.com/topic/339585 1. 2. 3. 4. 5. loading demo 6. 7. function show(){ 8. var loadbox =document.getElementById("loadlayer")
复制链接

扫一扫