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代码：
jquery弹出div窗口#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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。