<div id="body"> 显示页面的全部内容

    <div id="open">打开弹框</div>

</div>

//页面的遮罩层

<div id="cover"></div>

//页面的弹出框

<div id="modal">

    <div id="close">关闭弹框</div>

</div>

<script>

$(document).ready(function(){

     $("#open").click(function() {

           cover.style.display="block";   //显示遮罩层

           modal.style.display="block";   //显示弹出层

     })

      $("#close").click(function() {

          cover.style.display="none";   //隐藏遮罩层

          modal.style.display="none";   //隐藏弹出层

      })

})

</script>

#cover{

    position:absolute;left:0px;top:0px;

    background:rgba(, , , 0.4);

    width:%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/

    height:%;

    filter:alpha(opacity=);  /*设置透明度为60%*/

    opacity:0.6;  /*非IE浏览器下设置透明度为60%*/

    display:none;

    z-Index:;

}

#modal{

    position:absolute;

    width:500px;

    height:300px;

    top:%;

    left:%;

    background-color:#fff;

    display:none;

    cursor:pointer;

    z-Index:;

}