CSS 实现遮罩弹窗效果

CSS 实现遮罩层弹窗效果

原理：

写一个遮罩功能div，宽度高度均为100%，设置背景色，设置透明度，设置z-index 值为倒数第二大，目的为了在倒数第二层，把页面显示的内容给盖住！

写一个弹出功能div，设置z-index 值为最大，目的要显示在最上层！

html代码：

<div id="body">显示页面的全部内容
    <div id="open">打开弹框</div>
</div>
//页面的遮罩层
<div id="cover"></div>
//页面的弹出框
<div id="modal">
    <div id="close">关闭弹框</div>
</div>

jquery代码：

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

CSS代码：

#cover{ 
    position:absolute;left:0px;top:0px;
    background:rgba(0, 0, 0, 0.4);
    width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    height:100%;
    filter:alpha(opacity=60);  /*设置透明度为60%*/
    opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
    display:none; 
    z-Index:999;  
}
#modal{ 
    position:absolute;
    width:500px;
    height:300px;
    top:50%;
    left:50%;
    background-color:#fff;
    display:none;
    cursor:pointer;
    z-Index:9999;  
}