css+jQuery遮罩层

最新推荐文章于 2023-10-25 23:19:06 发布

mimiaifll

最新推荐文章于 2023-10-25 23:19:06 发布

阅读量178

点赞数

分类专栏： jQuery 文章标签： jquery css ViewUI

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>协同工作平台后台登陆</title>
<script src="res/common/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$(".bg").width($("#overlay").width());   
	$('.bg').height($("#overlay").height());   
	//获取被遮罩层的定位，以实现遮罩层对被 遮罩层的完美"覆盖"
	[color=red]var position = $("#overlay").position();[/color]	$('.bg').css('left',position.left);      
	$('.bg').css('top',position.top);   
});
</script>
<style type="text/css">
#overlay {
	top: 0px;
	left: 0px;
	z-index: 100; /* 此处的图层要大于页面 */
}
.bg {
	[color=blue]filter: alpha(opacity = 150); /* IE的透明度 */
	opacity: 0.5; /* 透明度 */[/color]	z-index: 200; /* 此处的图层要大于页面 */
	-moz-opacity:0.5;/*添上后兼容性会更好*/
	-khtml-opacity:0.5;/*添上后兼容性会更好*/
	[color=blue]position:absolute;/*必须是这种定位*/
	background-color:#000; [/color]}
</style>
<script type="text/javascript">

</script>
</head>
<body>
	<div id="overlay" >来遮罩我…………………………</div>
	<div class="bg"></div>
</body>
</html>

以上代码在ff gg IE8下面测试通过

mimiaifll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+jQuery遮罩层

[code="java"]协同工作平台后台登陆$(function(){ $(".bg").width($("#overlay").width()); $('.bg').height($("#overlay").height()); //获取被遮罩层的定位，以实现遮罩层对被遮罩层的完美"覆盖" [color=red]var position...
复制链接

扫一扫