点击空白处让弹窗隐藏

最新推荐文章于 2019-07-07 22:36:00 发布

littlebearGreat

最新推荐文章于 2019-07-07 22:36:00 发布

阅读量2.1k

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebearGreat/article/details/72764977

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

比如，登录框等，点击弹窗外的其它地方让弹窗消失。

很简单，但要注意两个问题：

1.firefox对event的兼容性

2.冒泡事件

上代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>hide</title>
	<script src="jquery.min.js"></script>
	<style>
		.box{
			margin: 100px auto;
			width: 200px;
			height: 200px;
			background-color: #E6BBFC;
			display: none;
		}
	</style>
</head>
<body>
	<button class="btn">点我出现弹窗</button>
	<div class="box"></div>
<script>
	$(function(){
		$('.btn').click(function(ev){
			var event = ev || event;  // firefox的兼容性
			event.stopPropagation();  // 阻止冒泡事件

			$('.box').show();
		});

		// 点击弹窗时，阻止冒泡事件
		$('.box').click(function(ev){
			var event = ev || event;
			event.stopPropagation();
		});

		$(document).click(function(){
			$('.box').hide();
		});
	})
</script>
</body>
</html>

littlebearGreat

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击空白处让弹窗隐藏

比如，登录框等，点击弹窗外的其它地方让弹窗消失。很简单，但要注意两个问题：1.firefox对event的兼容性2.冒泡事件上代码： hide .box{ margin: 100px auto; width: 200px; height: 200px; background-color: #E6BBFC; displa
复制链接

扫一扫

专栏目录