JS 点击按钮及弹框以外的区域时隐藏弹框

最新推荐文章于 2023-05-04 10:58:16 发布

转载最新推荐文章于 2023-05-04 10:58:16 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/yimawujiang/article/details/86496936

文章标签：

#javascript

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文展示了一个使用JavaScript实现的弹窗交互示例，通过按钮触发弹窗显示，并利用点击事件控制弹窗的隐藏，实现了基本的用户界面交互功能。

<body>
	<button id="btn" onclick="alertBoxFn()">打开弹窗</button>
	<div id="alertBox" onclick="outside=false"></div>
</body>
 
 
<script>
	var outside=true
	function alertBoxFn(e) {
		outside=false
		alertBox.style.display = "block";
	}
	document.body.addEventListener('click', function() {
		outside=true
	},true)
	document.body.addEventListener('click', function() {
		if(outside){
			alertBox.style.display = 'none'
		}
	})
</script>