Jquery遮罩层

最新推荐文章于 2021-03-31 18:31:41 发布

烟雨青山

最新推荐文章于 2021-03-31 18:31:41 发布

阅读量590

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq1036053871/article/details/60883359

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Jquery遮罩层</title>

<style type="text/css">
#BgDiv {
	background-color: #e3e3e3;
	position: absolute;
	z-index: 99;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 1000px;
	opacity: 0.5;
	filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
}

#DialogDiv {
	position: absolute;
	width: 400px;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	height: auto;
	z-index: 100;
	background-color: #fff;
	border: 1px #8FA4F5 solid;
	padding: 1px;
}

#DialogDiv h2 {
	height: 25px;
	font-size: 14px;
	background-color: #8FA4F5;
	position: relative;
	padding-left: 10px;
	line-height: 25px;
}

#DialogDiv h2 a {
	position: absolute;
	right: 5px;
	font-size: 12px;
	color: #000000
}

#DialogDiv .form {
	padding: 10px;
}

#DialogDiv2 {
	position: absolute;
	width: 400px;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	height: auto;
	z-index: 100;
	background-color: #fff;
	border: 1px #8FA4F5 solid;
	padding: 1px;
}

#DialogDiv2 h2 {
	height: 25px;
	font-size: 14px;
	background-color: #8FA4F5;
	position: relative;
	padding-left: 10px;
	line-height: 25px;
}

#DialogDiv2 h2 a {
	position: absolute;
	right: 5px;
	font-size: 12px;
	color: #000000
}

#DialogDiv2 .form {
	padding: 10px;
}

#DialogDiv3 {
	position: absolute;
	width: 400px;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	height: auto;
	z-index: 100;
	background-color: #fff;
	border: 1px #8FA4F5 solid;
	padding: 1px;
}

#DialogDiv3 h2 {
	height: 25px;
	font-size: 14px;
	background-color: #8FA4F5;
	position: relative;
	padding-left: 10px;
	line-height: 25px;
}

#DialogDiv3 h2 a {
	position: absolute;
	right: 5px;
	font-size: 12px;
	color: #000000
}

#DialogDiv3 .form {
	padding: 10px;
}
</style>

<script language="javascript" type="text/javascript"
	src="http://www.cydiguo.com/static/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
	function ShowDIV(thisObjID) {
		$("#BgDiv").css({
			display : "block",
			height : $(document).height()
		});
		var yscroll = document.documentElement.scrollTop;
		$("#" + thisObjID).css("top", "100px");
		$("#" + thisObjID).css("display", "block");
		document.documentElement.scrollTop = 0;
	}
	function closeDiv(thisObjID) {
		$("#BgDiv").css("display", "none");
		$("#" + thisObjID).css("display", "none");
	}
</script>

</head>

<body>
	<div id="BgDiv"></div>

	<!--遮罩层显示的DIV1-->
	<div id="DialogDiv" style="display: none">
		<h2>
			弹出层<a href="#" id="btnClose" οnclick="closeDiv('DialogDiv')">关闭</a>
		</h2>
		<div class="form">我是弹出对话框111111！！</div>
	</div>

	<!--遮罩层显示的DIV2-->
	<div id="DialogDiv2" style="display: none">
		<h2>
			弹出层<a href="#" id="btnClose2" οnclick="closeDiv('DialogDiv2')">关闭</a>
		</h2>
		<div class="form">我是弹出对话框2222！！</div>
	</div>

	<!--遮罩层显示的DIV3-->
	<div id="DialogDiv3" style="display: none">
		<h2>
			弹出层<a href="#" id="btnClose3" οnclick="closeDiv('DialogDiv3')">关闭</a>
		</h2>
		<div class="form">我是弹出对话框3333333！！</div>
	</div>

	<p>
		<input value="弹出遮罩层1" type="button" id="btnShow1"
			οnclick="ShowDIV('DialogDiv')" /> <input value="弹出遮罩层2"
			type="button" id="btnShow2" οnclick="ShowDIV('DialogDiv2')" /> <input
			value="弹出遮罩层3" type="button" id="btnShow3"
			οnclick="ShowDIV('DialogDiv3')" />
	</p>
</body>
</html>

烟雨青山

关注

0
点赞
踩
0

收藏

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

Jquery遮罩层#BgDiv { background-color: #e3e3e3; position: absolute; z-index: 99; left: 0; top: 0; display: none; width: 100%; height: 1000px; opacity: 0.5; filter: alpha(opacity = 50); -moz
复制链接

扫一扫