css透明遮蔽效果

这段代码是通过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>

平凡而简单的人一个，无权无势也无牵无挂。一路厮杀，只进不退，死而后已，岂不爽哉！
收起对“车”日行千里的羡慕；收起对“马”左右逢缘的感叹；目标记在心里面，向前进。一次一步，一步一脚印，跬步千里。
这个角色很适合现在的我。

css透明遮蔽效果

你可能感兴趣的:(css透明遮蔽效果)