javascript jquery div 遮罩层可以使用的

最新推荐文章于 2024-05-10 17:39:47 发布

南京煜之隆

最新推荐文章于 2024-05-10 17:39:47 发布

阅读量850

点赞数

分类专栏： javascript 文章标签： javascript 浏览器遮罩层

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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" />

<script type="text/javascript" src="../resource/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	//显示灰色JS遮罩层 
	function showLayerMask(ct, content) {
		var bH = $("body").height();
		var bW = $("body").width() + 16;
		var objWH = getObjWh(ct);
		$("#fullbg").css({
			width : bW,
			height : bH,
			display : "block"
		});
		var tbT = objWH.split("|")[0] + "px";
		var tbL = objWH.split("|")[1] + "px";
		$("#" + ct).css({
			top : tbT,
			left : tbL,
			display : "block"
		});
		$("#" + content).html(
				"<div style='text-align:center'>正在加载，请稍后...</div>");
		$(window).scroll(function() {
			resetBg();
		});
		$(window).resize(function() {
			resetBg();
		});
	}
	function getObjWh(obj) {
		var st = document.documentElement.scrollTop;//滚动条距顶部的距离 
		var sl = document.documentElement.scrollLeft;//滚动条距左边的距离 
		var ch = document.documentElement.clientHeight;//屏幕的高度 
		var cw = document.documentElement.clientWidth;//屏幕的宽度 
		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() {
		var fullbg = $("#fullbg").css("display");
		if (fullbg == "block") {
			var bH2 = $("body").height();
			var bW2 = $("body").width() + 16;
			$("#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 closeLayerMask() {
		$("#fullbg").css("display", "none");
		$("#dialog").css("display", "none");
	}
</script>
<style type="text/css">
* {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#fullbg {
	background-color: Gray;
	display: none;
	z-index: 3;
	position: absolute;
	left: 0px;
	top: 0px;
	filter: Alpha(Opacity = 30);
	/* IE */
	-moz-opacity: 0.4;
	/* Moz + FF */
	opacity: 0.4;
}

#dialog {
	position: absolute;
	width: 200px;
	height: 200px;
	background: #F00;
	display: none;
	z-index: 5;
}

#all {
	height: 1000px;
}
</style>
</head>
<body>
	<div id="all">
		<a href="javascript:void(0);" οnclick="showLayerMask('dialog','layermask');">点击这里看JS遮罩层效果</a>
	</div>
	<!-- JS遮罩层 -->
	<div id="fullbg"></div>
	<!-- end JS遮罩层 -->
	<!-- 对话框 -->
	<div id="dialog">
		<div id="layermask"></div>
		<div style="text-align: center;">
			<a href="javascript:void(0);" οnclick="closeLayerMask();">关闭</a>
		</div>
	</div>
	<!-- JS遮罩层上方的对话框 -->
</body>
</html>