<!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>
转载请注明原文地址: https://ju.6miu.com/read-7308.html
