js+div遮罩层

1.head中加入如下代码：
<style>
.black_overlay {
background-color: black;
display: none;
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}
.white_content {
background-color: white;
border: 16px solid lightblue;
display: none;
height: 25%;
left: 35%;
overflow: auto;
position: absolute;
top: 20%;
width: 30%;
z-index: 1002;
}
.div_font{
color:#000000;
font-size: 30px;
font-weight: normal;
}
.white_content_small {
background-color: white;
border: 16px solid lightblue;
display: none;
height: 50%;
left: 30%;
overflow: auto;
position: absolute;
top: 20%;
width: 40%;
z-index: 1002;
}
</style>

2.引入jquery:
<script type="text/javascript" src="js/jquery.js"></script>
3.在body中加入：
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content div_font">
<div style="text-align: right; cursor: default; height: 40%;">
<!-- span οnclick="CloseDiv('MyDiv','fade')">关闭</span-->
</div>
<div style="text-align:center;">错啦错啦</div>
</div>
4.加入js代码：
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
setTimeout("CloseDiv('MyDiv','fade')",3000);
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
5.在适当的时候调用ShowDiv('MyDiv','fade')方法;