遮蔽层的实现

最新推荐文章于 2018-09-10 08:24:26 发布

majiwei_wh

最新推荐文章于 2018-09-10 08:24:26 发布

阅读量322

点赞数

分类专栏： Web技术文章标签： IE Safari JavaScript XHTML CSS ViewUI

Web技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果：

<!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" οnclick="show()" />
        <input type="button" value="hide" οnclick="hide()"/>
        <br />
        <br />
        --------------------------------------------------------------------<br />
        --------------------------------------------------------------------<br />
		这段代码是通过lightbox2.02的源代码里面学习来的,主要要注意的地方是如果用overlayer包裹
loadlayer层的话,loadlayer层会继承overlayer层的透明属性,而且这种继承后的透明属性很难屏蔽掉,
比如在loadlayer上重新定义透明,新定义的透明不会有预期的效果.所以处理的时候必须要overlayer
与loadbox分离来,单独来处理就不会出现上面的情况了.
        具体的网页内容.写在这里,上面通过一个半透明层遮蔽下面的内容<br />
  </div>
</body>
</html>

majiwei_wh

关注

0
点赞
踩
0

收藏

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

效果： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;..
复制链接

扫一扫

专栏目录