工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > 综合应用 > 正文

点击弹出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/

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

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:如何快速制作一个带特效的选项卡下一篇:网站特效之文字的淡入漂移

原创不易,您的赞助就是博主更新的动力!

赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。

HashOver畅言云评完全自托管的评论系统

工作室注册登录标签云赞助光荣榜

最新会员
  • 东方星雨
  • deanhan
  • 1264822519
  • aini3311
  • a1051020101
  • weiyiqi