实现点击空白关闭模态框

监听document，当用户点击后，获取点击的id，如果id不是modal则关闭modal
当然还需要注意的是要阻止modal的冒泡事件，不然modal一弹出来之后就又关闭了。

停止冒泡

$("#modal").bind("click", function(event) {if (event && event.stopPropagation) {event.stopPropagation();
} else {event.cancelBubble = true;
}});

监听document

$(document).one("click", function(e){var $target = $(e.currentTarget);
if ($target.attr("id") != "modal") {$("#modal").css("display", "none");
}
});

原生JS参考我的另一篇文章：
https://blog.csdn.net/qq_42535651/article/details/104127120

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

bootstrap禁用点击空白处关闭模态框
原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html 转载于:https://www.cnblogs.com/yzfdjzwl/p/56856 ...
js实现模态框点击空白关闭
面试的时候被问到了,这个问题我在网上一直没搜索到.不过bootstrap已经实现了. 在学习js事件委托的时候.想到可以解决这个问题. 在document添加点击监听,利用事件的捕获和冒泡,界面上的点 ...
echarts点击事件调用模态框，模态框中存在echarts
首先看一下效果 <!DOCTYPE html> <html><head><meta charset="utf-8" /><ti ...
弹窗的点击空白关闭，背景虚化，防止滚动穿透
1.点击空白关闭最简单的vue <div @click="tan">点击谈窗2</div><div class="tanchuang&qu ...
js点击空白关闭div
点击空白关闭div 1.html <div class="tardiv">div块</div> 2.css div {width: 200px;height ...
点击按钮显示模态框，只显示模态框背景
点击按钮显示模态框,只显示模态框背景我的问题是,需要刷新页面,再点击模态框按钮才会显示模态框,否则,点击按钮只会弹出模态框背景,模态框未显示. 在加载ftl页面时添加了一个刷新页面的方法: $(do ...
ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)
项目中遇到的问题: 在elementui中表格点击按钮传值的时候,通过bus中的$emit传对象,在弹出的模态框中用bus的$on接收对象,然后对传的对象进行改变,结果发现改变了原表格的数据. 然后就 ...
Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能
其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...
html 点击空白关闭浮层,js中点击空白区域时文本框与隐藏层的显示与影藏问题...
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. function $(id){ retur ...

实现点击空白关闭模态框

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

最新文章

热门文章