js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936
问题：js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框？
方案一：这个问题通常的办法是使用阻止事件冒泡来实现，代码如下（省略css）：
<body>
<button id="btn1" onclick="alertBoxFn();stopBubble()">打开弹窗</button>
<div id="alertBox" onclick="stopBubble()"></div>
</body>
<script>
function alertBoxFn(e) {
alertBox.style.display = "block";
}
function stopBubble(e){
var e=e||window.event;
e.stopPropagation()
}
document.body.addEventListener('click', function() {
alertBox.style.display = 'none'
})
</script>
但这有一个弊端，就是如果页面上需要有多个按钮分别控制多个弹框，需求是点击按钮1时显示弹框1，点击按钮2时显示弹框2，同时隐藏弹框1。但结果却是点击按钮2时，按钮1并不会隐藏。这是因为按钮2阻止了点击事件的冒泡，导致body元素的点击事件并没有被触发。于是，这里我们不能再使用阻止事件冒泡的方法了。
方案二：声明一个变量用来判断鼠标是否点击的是按钮或弹框。代码如下（省略css）：
<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必须要在文档后面写，在head写documnet.body为null
document.body.addEventListener('click', function() {
outside=true
},true)
document.body.addEventListener('click', function() {
if(outside){
alertBox.style.display = 'none'
}
})
</script>
js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框的更多相关文章
- C# winfrom提示框，点击则不显示，不点击则提示输入内容
先看下效果图,初次进来是界面左边的效果,点击请输入账号,清除内容,可以直接输入,右边图 以下代码是失去焦点的,一定要把控件的属性TabStop 改 ...
- js的事件冒泡和点击其他区域隐藏弹出层
一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...
- RecyclerView嵌套TextView时显示文字不全的解决方法之一
先描述一下这个小bug:简单的TextView嵌套RecyclerView作为itemView时,可能会在文本中出现布局覆盖的现象,itemView的布局其实很简单,就是一个RelativeLayou ...
- 常见问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。
例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...
- JS实现鼠标经过用户头像显示资料卡的效果，可点击
基于项目的须要.须要制作出例如以下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料.事实上也就是类似QQclient的那种功能. 网上找了非常多代码,基本都实现了鼠标悬浮之后弹 ...
- JS实现类似QQ好友头像hover时显示资料卡的效果
一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...
- ios8 tableView设置滑动删除时 显示多个按钮
** * tableView:editActionsForRowAtIndexPath: //设置滑动删除时显示多个按钮 * UITableViewRowAction ...
- js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- js勾选时显示相应内容
使用环境,一.比如用户勾选时显示一些安全方面提示“你真的要自动登录吗?这将使你下次不需要密码即可进入你的个人中心.”二.显示其他预设选项,以方便用户选择输入,比如密保问题设置,当用户不想使用自定义设置 ...
随机推荐
- logrotate 切割日志
在工作中需要切割日志我们项目中选择的系统自带的logrotate,如需要其他需求需要自己在百度一下或者参考: https://www.cnblogs.com/kevingrace/p/6307298. ...
- Android中的算法
算法是思想的体现形式,常见的算法做一些总结 算法简介 算法-Algorithm 解题方案的准确而完整的描述,是一系列解决问题的清晰指令 特征 有穷性,确切性,输入项,输出项,可行性 算法运算要素 算术 ...
- 最新 识装java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 识装等10家互联网公司的校招Offer,因为某些自身原因最终选择了 识装.6.7月主要是做系统复习.项目复盘.LeetCo ...
- win运行canal
1.mysql开启log_bin 用命令查看是否开启 SHOW VARIABLES LIKE 'log_bin'; OFF为未开启,ON为开启 Win环境的话找到my.ini,Linux环境的话找到m ...
- 三、Spring的@Scope设置组件作用域
还是和上节一样,首先来看下配置类:MainConfig2 @Configuration 名 public class MainConfig2 { @Scope("singleton" ...
- python断点
pycharm怎么debug单步调试 1.打开一个Pycharm的界面,需要选中编辑器中的左侧. 2.点击Run---->Debug运行 3.点击箭头,向下运行 4.可以看到代码运行到下一条 5 ...
- Django实现博客项目
一.项目概述 项目运行环境 Python3.6+ Django 1.11 MySQL 5.7 其他插件(图片处理.分页.验证码....) 项目详细功能介绍 前台功能 项目首页展示 轮播图 博客推荐 最 ...
- PHP 死锁问题分析
背景:对于死锁的问题,人们往往想到出现一些关于访问很缓慢,有白页现象,要是测试环境(我就真实遇到测试环境有本文谈及一样的问题)你也就重启一下PHP的php-fpm进程发现又好了,隔一段时间又出类似的问 ...
- Java开发笔记（一百三十五）Swing的文件对话框
除了常规的提示对话框,还有一种对话框也很常见,它叫做文件对话框.文件对话框又分为两小类:打开文件的对话框.保存文件的对话框,但在Swing中它们都用类型JFileChooser来表达.下面是JFile ...
- leetcode两数相加
题目描述:给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...