jquery弹出提示框，背景变暗不能编辑

最新推荐文章于 2022-10-19 17:16:16 发布

幸福的小娟儿

最新推荐文章于 2022-10-19 17:16:16 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/xunuox/article/details/19492353

版权

*{padding: 0; margin: 0;}
#BgDiv{background-color:#000000; position:absolute; z-index:1; left:0; top:0; display:none; width:100%;
height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5; }
.thick1{width: 390px;height: 199px;background: url(../images/bg.png) no-repeat;
width: 430px; display: block; }
#thick1{position:absolute;z-index:200;left:30%;top:200px;}
#thick2{position:absolute;z-index:200;left:30%;top:200px;}
#thick3{position:absolute;z-index:200;left:30%;top:200px;}
#thick4{position:absolute;z-index:200;left:30%;top:200px;}
.thick1_msg{float:left;width: 391px;height: 100px;margin-top: 33px;}
.thick1msg_left{float:left;width: 56px;height: 62px;background: url(../images/warn.png) no-repeat;
margin:40px 0 0 55px;}
.thick1msg_right{float:left;width:200px;height: 60px;margin-top:44px;margin-left: 25px }
.thick1msg_right p{font-weight: bolder;font-size: 14px;line-height: 25px;}
.thick1msg_sure{float: left;width: 95px;height: 37px;margin:15px 0 0 140px; }
.button1{width: 95px;height: 37px;border: 1 solid #f1f1f1; background: url(../images/sure.png)no-repeat;}
/*******/

.thick2msg_left{float:left;width: 62px;height: 62px;background: url(../images/error.png) no-repeat;
margin:40px 0 0 55px;}

.thick2{z-index:100;width: 390px;height: 199px;background: url(../images/bg2.png) no-repeat;

width: 430px; display: block; }

<!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">
<link type="text/css" rel="stylesheet" href="css/thickcss.css"/>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn_center1").click(function () {
$("#BgDiv").css({ display: "block", height: $(document).height() });
$("#thick1").slideToggle("slow");
});
$("#btn_center2").click(function () {
$("#BgDiv").css({ display: "block", height: $(document).height() });
$("#thick2").slideToggle("slow");

});
$("#btn_center3").click(function () {
$("#BgDiv").css({ display: "block", height: $(document).height() });
$("#thick3").slideToggle("slow");
});
$("#btn_center4").click(function () {
$("#BgDiv").css({ display: "block", height: $(document).height() });
$("#thick4").slideToggle("slow");
});
})

function closeDiv(thisObjID) {

$("#BgDiv").css("display", "none");
$("#" + thisObjID).css("display", "none");
}

</script>

</head>
<body>
<div id="BgDiv"></div>
<input id="btn_center1" class="thickbox" type="button" value="点击弹出隐藏层" />
<input id="btn_center2" class="thickbox" type="button" value="点击弹出隐藏层" />
<input id="btn_center3" class="thickbox" type="button" value="点击弹出隐藏层" />
<input id="btn_center4" class="thickbox" type="button" value="点击弹出隐藏层" />
<div id="thick1" class="thick1" style="display:none">
<div class="thick1_msg">
<div class="thick1msg_left"></div>
<div class="thick1msg_right">
<p>用户不存在或密码不正确。
请点击确定重新登录!</p>
</div>

</div>
<div class="thick1msg_sure"><button type="button" id="button" class="button1"
οnclick="closeDiv('thick1')"></button></div>
</div>

<div id="thick2" class="thick1" style="display:none;">
<div class="thick1_msg">
<div class="thick2msg_left"></div>
<div class="thick1msg_right">
<p>用户不存在或密码不正确。
请点击确定重新登录!</p>
</div>

</div>
<div class="thick1msg_sure"><button type="button" id="button" class="button1"
οnclick="closeDiv('thick2')"></button></div>
</div>

<div id="thick3" class="thick2" style="display:none;">
<div class="thick1_msg">
<div class="thick1msg_left"></div>
<div class="thick1msg_right">
<p>用户不存在或密码不正确。
请点击确定重新登录!</p>
</div>

</div>
<div class="thick1msg_sure"><button type="button" id="button" class="button1"
οnclick="closeDiv('thick3')"></button></div>
</div>

<div id="thick4" class="thick2" style="display:none;">
<div class="thick1_msg">
<div class="thick2msg_left"></div>
<div class="thick1msg_right">
<p>用户不存在或密码不正确。
请点击确定重新登录!</p>
</div>

</div>
<div class="thick1msg_sure"><button type="button" id="button" class="button1"
οnclick="closeDiv('thick4')" ></button></div>
</div>
</body>
</html>