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