初看这个标题有点绕口,其实意思就是说,当在页面上点击一个按钮时,弹出一个弹出层,然后如果想关闭这个弹出层怎么办呢,一是可以点击弹出层容器包含的一个关闭按钮,另外一个就是点击遮罩层。
来张图来说明吧:
其实这种需求在移动端是很常见的,那么如何来实现呢,最重要的一点就是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>