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