<style>
body{ font-family:Arial, Helvetica, sans-serif; color:#FFF;}
.divPopup{
position:absolute;
/*设置高度为需要的高度, 即：高度不固定*/
width:100%;
height:100%;
left:0;
top:0;
z-index:9999;
}
.mobal{
position:absolute;
width:100%;
height:100%;
display:block;
background-color:#000;
opacity:0.4;
/*兼容火狐*/
filter:alpha(opacity=80);
z-index:-1;
}
button{ border:solid 1px #EEE; border-radius:4px; background-color:#F4F; color:#FFF; font-size:13px; padding:2px 5px;}
.content{ text-align:center;}
</style>
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#btn1").bind("click", function(){
$(".divPopup").fadeIn(200);
$("#btn2").unbind().bind("click", function(){
$(".divPopup").fadeOut(200);
})
})
})
</script>
<body>
<button type="button" id="btn1">显示弹出层</button>
<!--用于包裹弹出层及其中的内容 此位于弹出层出现时需要覆盖的div里面-->
<div class="divPopup" style="display:none;">
<!--弹出层本生-->
<div class="mobal"></div>
<div class="content" style="text-align:center; color:#FFF;">
<p >弹出层需要显示的所有内容</p>
<button type="button" id="btn2">关闭弹出层</button>
</div>
</div>
</body>