js实现模态框点击空白关闭

面试的时候被问到了，这个问题我在网上一直没搜索到。不过bootstrap已经实现了。
在学习js事件委托的时候。想到可以解决这个问题。
在document添加点击监听，利用事件的捕获和冒泡，界面上的点击事件最终都会响应到document上，通过event e的target属性来判断是否点击的是模态框，如果不是的话就隐藏。

  <script>let modal = document.getElementsByClassName('modal')[0]document.addEventListener('click', function(e) {if (e.target === modal) {log('模态框被点击了哦')} else {modal.style.display = 'none'}})</script>

js实现模态框点击空白关闭相关推荐

js点击空白关闭div
点击空白关闭div 1.html <div class="tardiv">div块</div> 2.css div {width: 200px;height ...
Bootstrap开启模态框后对数据处理(标记模态框的开启与关闭状态)
JS用全局变量标记状态,方法中动态修改全局变量以标记状态是一个重要思想. 需求:组合条件查询数据,查询完之后填充到模态框中,开启模态框,模态框中有组合条件查询,此时查询只需要更新模态框表格数据不需要开 ...
BootStrap中Model模态框点击除了×号和关闭按钮外的其他区域不消失
问题描述:在使用Model(模态框)时,在模态框中编辑一些信息,点击黑色区域(就是除了×号和按钮的暗色区域),模态框会消失,而再次打开模态框是,原来编辑的信息还在解决办法: //在模态框的最外层添加 ...
弹窗的点击空白关闭，背景虚化，防止滚动穿透
1.点击空白关闭最简单的vue <div @click="tan">点击谈窗2</div><div class="tanchuang&qu ...
Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能
其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...
实现点击空白关闭模态框
监听document,当用户点击后,获取点击的id,如果id不是modal则关闭modal 当然还需要注意的是要阻止modal的冒泡事件,不然modal一弹出来之后就又关闭了. 停止冒泡 $(&quo ...
html 点击空白关闭浮层,js中点击空白区域时文本框与隐藏层的显示与影藏问题...
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. function $(id){ retur ...
jQuery: 仿select下拉框效果，点击空白关闭弹出层，判断是否被mouseover
1. 方法一 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
dialog监听点击空白关闭_为什么App Store打开一片空白？尝试这样解决
作为苹果唯一官方应用商店,App Store的重要性不言而喻.而很多ios用户都曾经遇到过这种情况,就是当你想要进入App Store下载相关软件时,发现点击进入一片空白.今天阿签就来和大家说说,为什 ...

js实现模态框点击空白关闭

js实现模态框点击空白关闭相关推荐

最新文章

热门文章