jquery遮罩弹出层代码

<style type="text/css">
#fullbg {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: gray;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
.dialog {
	display: none;
	position: absolute;
	overflow: auto;
}
</style>
function showBg(content) {
	$("#fullbg").css({
		width :  $(document).width(),
		height : $(document).height(),
		display : 'block'
	});
	var objWH = getObjWh(content);
	var tbT = objWH.split("|")[0] + "px";
	var tbL = objWH.split("|")[1] + "px";
	
	$("#"+content).css({
		top : tbT,
		left : tbL,
		display : 'block'
	});
	$(window).scroll(function() {
		resetBg(content)
	});
	$(window).resize(function() {
		resetBg(content)
	});
}
function getObjWh(obj) {
	var st = $(document).scrollTop();//滚动条距顶部的距离 );
	var sl = $(document).scrollLeft();//滚动条距左边的距离  
	var ch = $(window).height()//浏览器时下窗口可视区域高度  
	var cw = $(window).width()//浏览器时下窗口可视区域宽度  
	var objH = $("#" + obj).height();//浮动对象的高度  
	var objW = $("#" + obj).width();//浮动对象的宽度 
	
	var objT = Number(st) + (Number(ch) - Number(objH)) / 2;
	var objL = Number(sl) + (Number(cw) - Number(objW)) / 2 ;
	
	return objT + "|" + objL;
}
function resetBg(dialog) {
	var fullbg = $("#fullbg").css("display");
	if (fullbg == "block") {
		var bH2 = $(document).height();
		var bW2 = $(document).width();
		$("#fullbg").css({
			width : bW2,
			height : bH2
		});
		var objV = getObjWh(dialog);
		var tbT = objV.split("|")[0] + "px";
		var tbL = objV.split("|")[1] + "px";
		$("#"+dialog).css({
			top : tbT,
			left : tbL
		});
	}
}

//关闭灰色JS遮罩层和操作窗口  
function closeBg(dialog) {
	$("#fullbg").hide();
	$("#"+dialog).hide();
}

 

<!-- z-index大的div覆盖在z-index小的div上 -->
<!-- 遮罩层 -->
<div id="fullbg"></div>
<!-- 弹出层 -->
<div id="code_get" class="dialog" style="z-index:1002;"></div>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值