`
a303896522
  • 浏览: 8197 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics