浏览 10995 次
|
锁定老帖子 主题：遮蔽层的实现
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-26
效果：
<!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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-03-27
只隐藏了一点啊
|
| 返回顶楼 | |
|
发表时间：2009-12-01
不错的资源。
透明度的设置： filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; /* 老版Safari */ opacity: 0.5; /* 支持opacity的浏览器*/ 你的代码的思路，在ie6中会有点问题，需要在body中加个heigth样式：<body style="height:100%"> |
| 返回顶楼 | |
