css遮罩--点击非弹出层隐藏弹出层
程序员文章站
2022-05-06 09:29:13
...
初看这个标题有点绕口，其实意思就是说，当在页面上点击一个按钮时，弹出一个弹出层，然后如果想关闭这个弹出层怎么办呢，一是可以点击弹出层容器包含的一个关闭按钮，另外一个就是点击遮罩层。
来张图来说明吧：
其实这种需求在移动端是很常见的，那么如何来实现呢，最重要的一点就是css的一个属性：z-index，当z-index越高，则表示越处于表层，那么，我们可以这样设计，弹出层的z-index为2，遮罩的z-index为1，其他的显示默认，那么在点击按钮探测弹出弹出层的时候，遮罩层也一起显示，此时弹出层和遮罩层都显示出来了，但是我们在弹出层的操作不受影响，因为弹出的的z-index是大于遮罩层的，然后再遮罩层添加一个点击事件，当点击遮罩层的时候，遮罩层和弹出层都不显示。
好了，原理很简单吧，我写了一分示例代码（可能有点丑）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.pop {
position:fixed;
min-width:50%;
min-height:50%;
margin-left:25%;
margin-top:5%;
background-color:yellow;
color:blue;
z-index:3;
}
.cover {
background-color:black;
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
opacity:0.5;
z-index:2;
}
</style>
<body>
<button class="btn btn-primary" id="menuBtn">功能</button>
<div class="pop" id="pop" >
<h1>弹出层</h1>
<button class="btn btn-primary" id="closeBtn">关闭</button>
</div>
<div class="cover" id="cover">hello</div>
</body>
<script>
$(function(){
$("#pop").hide()
$("#cover").hide()
})
$("#menuBtn").click(function(){
$("#pop").show()
$("#cover").show()
})
$("#cover").click(function(){
$("#pop").hide()
$("#cover").hide()
})
$("#closeBtn").click(function(){
$("#pop").hide()
$("#cover").hide()
})
</script>
</html>