转自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实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框的更多相关文章

  1. C# winfrom提示框，点击则不显示，不点击则提示输入内容

    先看下效果图,初次进来是界面左边的效果,点击请输入账号,清除内容,可以直接输入,右边图                            以下代码是失去焦点的,一定要把控件的属性TabStop 改 ...

  2. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  3. RecyclerView嵌套TextView时显示文字不全的解决方法之一

    先描述一下这个小bug:简单的TextView嵌套RecyclerView作为itemView时,可能会在文本中出现布局覆盖的现象,itemView的布局其实很简单,就是一个RelativeLayou ...

  4. 常见问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。

    例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...

  5. JS实现鼠标经过用户头像显示资料卡的效果，可点击

    基于项目的须要.须要制作出例如以下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料.事实上也就是类似QQclient的那种功能. 网上找了非常多代码,基本都实现了鼠标悬浮之后弹 ...

  6. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  7. ios8 tableView设置滑动删除时 显示多个按钮

      ** *  tableView:editActionsForRowAtIndexPath:     //设置滑动删除时显示多个按钮 *  UITableViewRowAction          ...

  8. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  9. js勾选时显示相应内容

    使用环境,一.比如用户勾选时显示一些安全方面提示“你真的要自动登录吗?这将使你下次不需要密码即可进入你的个人中心.”二.显示其他预设选项,以方便用户选择输入,比如密保问题设置,当用户不想使用自定义设置 ...

随机推荐

  1. Linux学习-基本命令文件操作

    终端 1.多个终端 连接linux的客户端可以理解为终端. 命令:tty查看终端 2.不同终端之间的通讯 [root@wyx wyx]# echo 123 > /dev/pts/1 把123发给 ...

  2. 《Redis 分布式锁》

    一:什么是分布式锁. -  通俗来说的话,就是在分布式架构的redis中,使用锁. 二:分布式锁的使用选择. - 当 Redis 的使用场景不多,而且也只是单个在用的时候,可以构建自己使用的 锁. - ...

  3. example

    import pandas as pd import numpy as np import os,sys df = pd.read_excel("C:\\Users\\ryanzhang\\ ...

  4. CCS中的linked resource

    一.关于CCS中的linked resource linkded resources 是eclipse中的一个功能,可以将存放在项目所在位置以外某个路径的文件或者文件夹链接至工程项目中.这个功能最大的 ...

  5. Go语言 ( 切片)

    本文主要介绍Go语言中切片(slice)及它的基本使用. 引子 因为数组的长度是固定的并且数组长度属于类型的一部分,所以数组有很多的局限性. 例如: func arraySum(x []int) in ...

  6. crontab 定时删除

    /60 * * * /bin/find /usr/local/****/****/****/****/****.log.2019* -exec rm -f {} ; >/dev/null 2&g ...

  7. vue生成带logo的二维码

    输入命令行下载 npm install vue_qrcodes <template> <div> <qrcode :url="></qrcode&g ...

  8. Golang --多个变量同时赋值

    编程最简单的算法之一,莫过于变量交换.交换变量的常见算法需要一个中间变量进行变量的临时保存.用传统方法编写变量交换代码如下: var a int = 100 var b int = 200 var t ...

  9. logback 日志相关

    日志相关: logback:https://www.cnblogs.com/gavincoder/p/10091757.html https://www.cnblogs.com/hhhshct/p/9 ...

  10. CCF 2016-12-1 中间数

    CCF 2016-12-1 中间数 题目 问题描述 在一个整数序列a1, a2, -, an中,如果存在某个数,大于它的整数数量等于小于它的整数数量,则称其为中间数.在一个序列中,可能存在多个下标不相 ...