<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.2min.js"></script>
<style>
#bg {
filter:alpha(opacity = 50);
opacity:0.5;
background-color:ActiveBorder;
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
right:0;
bottom:0;
z-index:99;
display:none;
}
#popup_box {
position:absolute;
left:50%;
top:50%;
width:400px;
height:100px;
z-index:100;
background-color:#fff;
border:1px #8FA4F5 solid;
padding:1px;
display:none;
}
</style>
</head>
<body>
<script>
$(document).ready(function () {
$("#popup_box").css({marginTop:-200, marginLeft:-200,});
});
function popupTest(tag) {
if (tag == 0) {
$("#popup_box").hide();
$("#bg").hide();
}
else {
$("#popup_box").show();
$("#bg").show();
}
}
</script>
<div id="bg">//背景层,通过设置它的z-index属性比当前页大,达到覆盖效果并设置高宽和当前页的一样,再加上设置透明度,并且使用绝对定位
</div>
<div id="popup_box">//显示层,也是设置它的z-index比背景层大,同样使用绝对定位。
<div id="popup_title">
<div><a href="#" onclick="popupTest(0); return false;"><span id="popup_close">关闭</span></a></div>
</div>
<div id="popup_content_border">
<div id="popup_content">第一个弹出层测试</div>
</div>
</div>
<div style="vertical-align:middle;"><center><a href="#" onclick="popupTest(1); return false;">第一个弹出层</a></center></div>
</body>
</html>
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYEAAACGCAIAAAC0SaF/AAAD3ElEQVR4nO3ZMW7qShiG4VkTEgU7oaJiGSnTZgfpI90yNRtIdbo07IDi9FT3Fta1kGPMmDB8UXge/QWxJjYp/MrjlP3huPv4LKXsD8fXt/fFcrU/HAezWK5e3977H5+eX7pZb7aDleWL0/N3H56eX04PGmMeecr+cHx6fulzUErpc9MnZtCg3cfnYrlaLFe7j8/9/zXZfXy+vr0PstKdbbRxoxddb7bdRb+eyhjzK6eUUtabbX/Dd73o9N0ZNGh/OK43274mfYP6gpwuW2+2p488i+WqO/npRTXImIedK+/z9WbbbalqxrbLGHNurknD3KY8Pb+MvmYyxpjZDer2UIOt2bnptlQegowx50YdjDHJ0SBjTHI0yBiTHA0yxiRHg4wxySn/7P4YY0xqyr8AORoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGtRWKX8rD7a+6NxfuXiS1n8FD0KD2irl72DOHbztReu/0uhv1XylyjUX5+JJ+N00qKH+Bhu9vRvdfn3m6hdX/u7o4nM/ThyctYBfT4Naqbm9mz4BzXqWqXlC0SBa0KC27rkT+c47nYkP585W2SB7MaZp0F21ew6q3ED1BwcJaNegy1+dx6ZBd9WoQXPrMHqkZi8294lGg7hIg9qadd/W7Fy+Pr/UJ2Z6wbkPE3/a9EX7g/ZiTNCgttptvuovWrPg+w26eg0PToPa+rENGn2emvWEokHchAa1FfnHUP05a/Zx9SuveIVkO4YG3U/lu5ubXOjqlTdv0HVfjMehQXfSv50dPd7iWvUra55Qvt8gPWKUBjU3eO1y+qHRffhDnoOmEzbre/KLaVAroy87Lt6Wt7p0zYJZXbjizc70C28vg+ho0F39kP+LTaz5zje8YuelQWgQkKRBTVTuXIwdGRoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGgQkaRCQpEFAkgYBSRoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGgQkaRCQpEFAkgYBSRoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGgQkaRCQpEFAkgYBSRoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGgQkaRCQpEFAkgYBSRoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGgQkaRCQpEFAkgYBSRoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGgQkaRCQpEFAkgYBSRoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGgQkaRCQpEFAkgYBSRoEJGkQkKRBQJIGAUkaBCRpEJCkQUCSBgFJGgQkaRCQpEFA0n+paev6Rn9mVAAAAABJRU5ErkJggg==)
![](data:image/png;base64,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)