点击目标区域外的其他区域，关闭弹窗

最新推荐文章于 2024-07-11 17:14:48 发布
最新推荐文章于 2024-07-11 17:14:48 发布
阅读量291 收藏
点赞数
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44325545/article/details/131534060
版权
该代码示例展示了如何利用jQuery的文档对象模型（DOM）事件监听功能，当用户在页面上非目标区域（ID为showData的元素）点击时，关闭显示为弹窗的元素。通过判断点击事件的目标元素是否为目标区域或其子元素，决定是否隐藏弹窗。
摘要由CSDN通过智能技术生成 
//点击目标区域外的其他区域，关闭弹窗
$(document).mouseup(function(e){
     var targetArea = $("#showData");   // 设置目标区域
     if(!targetArea.is(e.target) && targetArea.has(e.target).length === 0){
         $("#showData").css('display', 'none');
     }
 });

扑咪扑咪 �
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现点击弹框外关闭弹框功能
weixin_43294560的博客
01-26 6022
点击弹框外关闭弹框 核心是监听全局点击事件,通过判断点击时的dom元素是否包含在弹框的dom中，即弹框dom.contains(event.target) <body> <div class="modal">Modal</div> <script> const model = document.querySelector('.modal'); function toggle(open) {
vue3写一个点击弹框之外的区域关闭弹框
weixin_42579969的博客
12-30 1494
<p>如果要在 Vue 3 中实现点击弹框之外的区域关闭弹框的功能，可以这样做：</p> <ol> <li><p>在组件的模板中，包含一个用于显示弹框的元素，并且将该元素的 <code>ref</code> 属性设置为 <code>popup</code>。这样可以使用 <code&g...
解决elementui el-tooltip，在弹框之后再次出现的问题
最新发布
weixin_54007650的博客
07-11 423
点击取消之后，第一次悬浮上去并不会提示。第二次悬浮才会提示。修改一下代码，在将disable的状态改成可用的时候。虽然方式有点笨，但是胜在简单，不需要去另外写什么样式，函数什么的。想到点击标签弹出弹出框的时候先给tooptip的disabled属性禁用掉，之后使用计时器2秒钟之后再改成可用。百度一下，发现由于tooltip会默认给dom元素一个tabindex属性，当弹框结束之后，tabindex会自动选中，导致再次出现的问题。最近在用el-tooltip里面包裹了一个标签，点击弹出弹出框，点击取消发现。
jQuery 实现弹出框点击自身以外的地方（遮罩层）关闭弹出框
好巧的博客
12-20 7207
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。应用场景：有一个按钮，点击弹出一个弹框，里面被放置一些内容，点击弹框本身弹框是不会被关闭的，但是点击弹框以为的遮罩层弹框就会被关闭。将以下代码复制下来到本地直接查看效果，重要地方都有注解。如果本篇文章对你有帮助的话，很高兴能够帮助上你。'弹出框以外的部分被点击了''弹出框内部被点击了'
页面设置弹窗，点击其他区域，弹窗关闭
weixin_30548917的博客
10-29 862
页面设置弹窗，点击其他区域，弹窗关闭（案列） <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>test</title> </head> <body> <button id="btn"...
js 点击弹窗外区域关闭弹窗
韩梦飞沙_韩亚飞
02-18 3258
js 点击弹窗外区域关闭弹窗 js 点击 其他关闭弹窗 $(document).mouseup(function(e){ var targetArea = $("#div_id"); // 设置目标区域 if(!targetArea.is(e.target) && targetArea.has(e.target).length === 0){ $("#div_id").css('display', 'none'); .
点击目标弹窗区域外,关闭弹窗
布尔没有码
11-18 647
点击目标弹窗区域外,关闭弹窗
vue.js点击弹窗以外的区域关闭弹窗
认定的总要想办法去完成。
11-26 2912
点击弹窗外的区域关闭弹窗 代码结构 html: <div class="publish_mask_popup" @click="hideMaskPopup" v-show="showMaskPopup"> <div class="mask_popup"> 内容代码..... </div> </div> js: data(){ showMaskPopup:false }, methods: { hideMaskPopup(e)
Vue 实现点击弹窗以外的以外区域可以关闭弹窗
xue1163的博客
11-04 1733
HTML部分 <div class="hunan_dialog" v-show="showHunanDialog" ref="treeWrap1"> </div> js部分 // 全局点击事件 document.addEventListener('mouseup',(e) =>{ let tree = this.$refs.treeWrap1 if (tree) { // 判断鼠标点击的区域是否在tree里面，否则关闭弹窗
简单的点击空白处（弹窗主要内容外）关闭弹窗功能
weixin_44200288的博客
06-24 1725
一些方法是通过监听鼠标事件判断点击区域与目标区域是否一致来实现的，其实我们只需要在弹窗内容部分阻止点击事件冒泡就可以了。 <template> <div> <button @click="show=true" class="btn">点击打开弹窗</button> <!--弹窗背景蒙版--> <div class="pop-bg" v-if="show" @click="show=false">
html实现点击元素弹窗，点击其他关闭弹窗
04-04
2. 给整个页面（或者弹窗以外的区域）添加一个点击事件，当点击页面时关闭弹窗。 3. 在弹窗的HTML代码中添加一个id，方便用JavaScript操作该弹窗。 下面是一个示例代码： ```html <!DOCTYPE html> 点击元素...
sweetalert加载弹窗完成自动关闭
09-19
`allowOutsideClick`确保在加载期间用户无法点击弹窗外的区域关闭弹窗。 综上所述，"SweetAlert加载弹窗完成自动关闭"涉及的知识点包括：SweetAlert的使用，创建加载中的弹窗，使用`showLoaderOnConfirm`和`...
点击任意位置关闭（CocosCreator）
爱上游戏开发
07-03 4276
推荐阅读：  我的CSDN  我的博客园  QQ群：704621321       今天，接触到一个新功能，当弹出某个弹框时，需要点击除弹框的剩余任意位置，来关闭该弹框，例如：当红框内容显示时，点击红框外任意位置可关闭红框。       ...
自定义指令：点击某个容器外触发事件，比如点击弹窗外，关闭弹窗（Vue）
weixin_43811753的博客
06-10 736
自定义指令：点击某个容器外触发事件，比如点击弹窗外，关闭弹窗（Vue）
鼠标点击弹出层区域外关闭层
xianyuzhang12的专栏
03-14 549
鼠标点击弹出层区域外关闭层
点击页面弹窗外的任意位置，弹窗异常关闭的解决办法
m0_47561027的博客
06-02 1164
在弹窗打开的位置添加close-on-click-modal，他的值设置成false，这样点击页面的其他位置弹窗就不会被关闭了。
js 监听点击事件，点击外部关闭弹框
ZFZ5720
03-04 627
js 监听点击事件，点击外部关闭弹框
【js】点击空白地方 弹框消失隐藏
jieweiwujie的博客
03-15 1826
写了一个弹框 点击空白地方想让它消失 searchFlag 控制显示和隐藏 addEventListenerFun() { document.addEventListener('mouseup', (e) => { let divSearch = document.querySelector('.position-form-item') //选择返回的第一个出现的元素 debugger; if (divSea..
elementui 实现弹框一直展示，在点击其他位置时再关闭（或可手动关闭）
虎康的博客
11-09 617
实例，你可以通过自定义配置来实现点击其他地方时关闭提示信息。具体做法是设置‘showClose‘为false，并使用‘this.message返回的Message实例的close`方法手动关闭提示信息。在这个示例中，当消息弹出后，我们通过document.body.addEventListener绑定了一个全局的点击事件，当点击页面上其他任意地方时，会关闭提示信息。elementui 实现弹框一直展示，在点击其他位置时再关闭（或可手动关闭）实例，你可以通过自定义配置来实现点击其他地方时关闭提示信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值