`
xutao5641745
  • 浏览: 223670 次
  • 性别: Icon_minigender_1
  • 来自: 汨罗
社区版块
存档分类
最新评论

JQuery 遮罩层

 
阅读更多

1.样式如下设置：

 

<style type="text/css">
	.mask {  
            position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
            z-index: 1002; left: 0px;
            opacity:0.5; -moz-opacity:0.5;
        }
</style>
 

   其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。

 

2.指定层的高度、和宽度。

 

<script type="text/javascript">
	//兼容火狐、IE8
	function showMask(){
		$("#mask").css("height",$(document).height());
		$("#mask").css("width",$(document).width());
		$("#mask").show();
	}
</script>

 

3.在<body>中加入如下代码，然后就可以看效果了：

 

 

<div id="mask" class="mask"></div>
<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
 

 

分享到：
| JavaServerWrapper做成服务
评论
2 楼 在世界的中心呼喚愛 2014-05-05  
spp_1987 写道
这个遮挡层不错 ， 但是为什么取消这个遮挡层的时候 ，再次打开 ，下面全是没有的了。

调试成功？
1 楼 spp_1987 2012-09-11  
这个遮挡层不错 ， 但是为什么取消这个遮挡层的时候 ，再次打开 ，下面全是没有的了。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics