点击弹出div层页面不可操作

发布时间：2017-09-06 00:08:35作者：魏义齐阅读：()评论：

本文为博主原创文章，未经博主允许不得转载。

我们经常需要做一个点击弹出div层页面不可操作的效果，如何实现呢？请看下面的代码

全部代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击弹出div层页面不可操作</title>
<script src="https://blog.weiyiqi.net/skin/weiyiqi/js/js.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}
.pop {
	width: 600px;
	height: 300px;
	background-color: #cfcfcf;
	position: fixed;
	left: 50%;
	margin-left: -300px;
	top: 50%;
	margin-top: -150px;
	border-radius: 20px;
	z-index: 2;
	display: none;
}
.pop span {
	position: absolute;
	right: 10px;
	top: 10px;
}
.bg {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	z-index: 1;
	display: none;
}
</style>
</head>

<body>
<p>点击一下</p>
<div class="pop"><span>关闭</span></div>
<div class="bg"></div>
<script>
  $(document).ready(function () {
	$("p").click(function () {
		$(".bg,.pop").show()
	});
	$(".pop span").click(function () {
		$(".pop,.bg").hide()
	})
})
</script>
</body>
</html>

测试：https://blog.weiyiqi.net/lookdoc/runtool/

本文标签：，您可以阅读与「」相关的所有文章

魏义齐全栈技术交流：

点击弹出div层页面不可操作

目前写过最复杂的div弹出遮罩层结构