css遮罩--点击非弹出层隐藏弹出层

最新推荐文章于 2023-03-31 10:41:53 发布

kkorkk

最新推荐文章于 2023-03-31 10:41:53 发布

阅读量4.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/kkorkk/article/details/80899695

版权

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种常见的移动端交互方式——点击按钮弹出带有遮罩的弹窗，并通过点击遮罩或弹窗内的关闭按钮来关闭弹窗的方法。重点介绍了如何使用z-index属性来实现这一效果，并提供了一个简单的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初看这个标题有点绕口，其实意思就是说，当在页面上点击一个按钮时，弹出一个弹出层，然后如果想关闭这个弹出层怎么办呢，一是可以点击弹出层容器包含的一个关闭按钮，另外一个就是点击遮罩层。

来张图来说明吧：

其实这种需求在移动端是很常见的，那么如何来实现呢，最重要的一点就是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>