遮罩层

参考：http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html

以前也曾经用到过

1.主要依赖于css的( body，html 的css代码必须，没有解决ie6下 select z-index 无限大的缺点)

<!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>无标题文档</title>
<style type="text/css">
*           {padding:0; margin:0}
html        { height:100%}
body        {height:auto !important;min-height:100%;height:100%;position:relative;}

.cscontent  {height:1550px;}

.zhez       {height:100%; width:100%;background:#000;opacity:0.3;filter:alpha(opacity=30); position:absolute; top:0; left:0; z-index:10;}
.content    {width:50px; height:50px;position:absolute;top:0;left:50%; margin-left:-25px;z-index:20; }
</style>


</head>

<body>
<div class="cscontent">
    测试内容<select><option>1111</option></select>
</div>

<div class="zhez"></div>
<div class="content">content</div>


</body>
</html>


上面的代码加上jquery 的 scroll() 的时候 ie6下出错,不知道为什么？？？添加scroll()后的代码：

<!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>无标题文档</title>
<style type="text/css">
*           {padding:0; margin:0}
html        {height:100%}
body        {height:auto !important;min-height:100%;height:100%;position:relative;}

.cscontent  {height:1550px;}

.zhez       {height:100%; width:100%;background:#000;opacity:0.3;filter:alpha(opacity=30); position:absolute; top:0; left:0; z-index:10;}
.content    {width:50px; height:50px;position:absolute;top:0;left:50%; margin-left:-25px;z-index:20; }
</style>
<script type="text/javascript"  src="jquery 插件/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
    
	var $css_top=parseInt( $(".content ").css("top") );
	$(window).scroll(function(){
	    var $s_top=$(window).scrollTop();
	    $(".content ").css({"top":$s_top+$css_top});
	});
	//var _manh=$("body").height();
	//$(".zhez").css({"height":_manh})
	
    
})

</script>

</head>

<body>
<div class="cscontent">
    测试内容<select><option>1111</option></select>
</div>

<div class="zhez"></div>
<div class="content">content</div>


</body>
</html>
上面的代码 将注释去掉后 可以实现完美 遮罩层，但是 滚动条滚动时候，内容总是抖动。。。？？？

覆盖select有两个比较好的方法：
1，显示层时，先隐藏select，关闭层时再重新显示；
2，用一个iframe作为层的底，来遮住select。

css代码比较难理解，主要是兼容性问题，用jquery就简单了很多：





posted @ 2013-07-12 15:10  hdchangchang  阅读(156)  评论(0)  编辑  收藏  举报