原理：
写一个遮罩功能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; }