jquery 实现先遮罩层。

最新推荐文章于 2021-03-29 02:45:17 发布

php_byrnes

最新推荐文章于 2021-03-29 02:45:17 发布

阅读量1.4k

点赞数

本文链接：https://blog.youkuaiyun.com/php_byrnes/article/details/39154713

版权

实现原理，就使用一个宽和高都等于body体的div，把body遮罩起来，调整背景透明,之后在用jquery 的show()和hide()方法来是先打开和关闭。

<head>

<title>遮罩层</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
$('#zc').click(function(){
$('#mark').show();
})
$("#closezc a").click(function(){
$("#mark").hide();
})

})
</script>
<style>
#mark{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; background:#000; opacity: 0.5;}
.tabs,#closezc{ width:700px; margin:0 auto; background:#fff; }
.tabs{ height:80%;}
#closezc{ text-align:right; margin-top:50px;}
#closezc a{ text-decoration:none;}
</style>
</head>
<body>
<a href="javascript:void(0)" id="zc">遮罩层</a>
<div id="mark">
<div id="closezc"><a href="javascript:void(0)">关闭</a></div>
<div class="tabs"> 这里是要弹出来的内容！<br />
</div>
</div>
</body>