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 onclick="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')方法;