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

最新推荐文章于 2024-03-04 16:45:57 发布
最新推荐文章于 2024-03-04 16:45:57 发布
阅读量217 收藏
点赞数
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44325545/article/details/131534060
版权 
//点击目标区域外的其他区域，关闭弹窗
$(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
    评论
js实现的点击div区域外隐藏div区域
01-19
首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。 阻止冒泡：1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true，对于IE浏览器， 而Jquery已经有兼容浏览器的方法，event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script type=text/javascript src
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
10-18
主要介绍了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能,结合实例形式分析了javascript事件响应及页面元素属性动态操作弹出与关闭遮罩层相关实现技巧,需要的朋友可以参考下
elementui 实现弹框一直展示，在点击其他位置时再关闭（或可手动关闭）
虎康的博客
11-09 498
实例，你可以通过自定义配置来实现点击其他地方时关闭提示信息。具体做法是设置‘showClose‘为false，并使用‘this.message返回的Message实例的close`方法手动关闭提示信息。在这个示例中，当消息弹出后，我们通过document.body.addEventListener绑定了一个全局的点击事件，当点击页面上其他任意地方时，会关闭提示信息。elementui 实现弹框一直展示，在点击其他位置时再关闭（或可手动关闭）实例，你可以通过自定义配置来实现点击其他地方时关闭提示信息。
点击色块出现选择框，点击其他区域选择框消失
EstherNi的博客
07-09 468
点击色块出现选择框，点击其他区域选择框消失
【Element】element-plus中el-dialog弹窗隐藏遮罩并可以控制弹窗后的元素、点击、滚动、其他事件操作等
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-29 2801
但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。
【BUGFIX】关于饿了吗（element-ui/element-plus）组件库的el-tooltip组件，在点击里面的内容打开弹窗的时候，提示不会消失的修复记录
老衲的少女心i~
05-31 671
按照网上查询来说，是由于tooltip会默认给dom元素一个tabindex属性，当弹框结束之后，tabindex会自动选中，导致再次出现的问题。这个地方，我们采用的是官方文档里面提供的方法，
解决elementui el-tooltip，在弹框之后再次出现的问题
lovlin_l的代码世界
05-17 4010
elementui el-tooltip有个bug就就是当有模态确认框的时候，el-tooltip会再次出现，经过一系列问题的排查，是由于tooltip会默认给dom元素一个tabindex属性，当弹框结束之后，tabindex会自动选中，导致再次出现的问题。 最后想到了，通过指令方式把tabindex给删除掉,，这样就可以解决问题了 创建clearTabIndex.js const vueClearIndex = {} /* * 解决tooltips，在弹框之后再次出现的问题，原因是由于tabindex
点击弹窗点击弹窗点击弹窗点击弹窗点击弹窗
01-28
点击弹窗点击弹窗点击弹窗点击弹窗点击弹窗点击弹窗点击弹窗点击弹窗
jquery页脚点击展开折叠弹窗效果
06-10
一款代码非常容易看懂的jquery广告特效，点击可以折叠亦可收缩，默认是在网页左下角。 可调整JS中$('.main').css('left','-262px');变量，来改变窗口的位置，默认为500的速度，亦可根据实际需要调节，简单方便 注：...
element 中Tooltip点击关闭事件
weixin_52005030的博客
07-15 2414
<el-tooltip :enterable="false" :manual="true" 这是取消移入事件 :value="isTooltip" //这个是布尔值来判断显示和隐藏 content="请勾选法律声明和隐私权政策" //声明的文字 placement="left" > </el-tooltip> ...
element-plus el-popover 点击其他区域关闭弹出框
ZZHSourceCode的博客
06-29 2365
使用时，也可以做到点击其他区域关闭弹出框，但是当按钮是禁用状态也会显示弹出框，这时候需要使用虚拟触发来解决。
js 监听点击事件，点击外部关闭弹框
最新发布
ZFZ5720
03-04 435
js 监听点击事件，点击外部关闭弹框
js 新学一招，点击出现弹框，点击其他地方关闭弹框
虎康的博客
09-27 705
鼠标点击菜单，出现二级菜单，当点击其他地方时，二级菜单自动关闭。
el-tooltip出现多个的问题
weixin_71287951的博客
09-29 1465
el-tooltip出现多个的问题
自定义指令：点击某个容器外触发事件，比如点击弹窗外，关闭弹窗（Vue）
weixin_43811753的博客
06-10 681
自定义指令：点击某个容器外触发事件，比如点击弹窗外，关闭弹窗（Vue）
js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
weixin_60886885的博客
03-30 2829
js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
JS点击某特定区域外关闭当前弹框
云兮莫愁的博客
07-01 2024
<div> <!--弹框1 div--> <div class='crimes-penalty-title'> <div class='crimes-penalty-title2'></div> </div> <!--其他区域--> <div class='crimes-penalty-content'> </div> </di.
js 点击弹窗外区域关闭弹窗
韩梦飞沙_韩亚飞
02-18 3224
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'); .
vue.js：点击空白区域关闭弹窗
彭世瑜的博客
04-24 5304
方式一： 判断点击区域是否包含弹框 <div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是弹窗里面的内容部分 </div> </div> 监听点击事件 mounted() { // 监听全局点击事件 document.addEventListener("click", this.bodyCloseMenus)
html实现点击元素弹窗，点击其他关闭弹窗
04-04
可以使用JavaScript来实现这个功能。具体步骤如下： 1. 给需要点击的元素添加一个点击事件，当点击该元素时弹出弹窗。 2. 给整个页面（或者弹窗以外的区域）添加一个点击事件，当点击页面时关闭弹窗。 3. 在弹窗的HTML代码中添加一个id，方便用JavaScript操作该弹窗。 下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>点击元素弹窗</title> <style> .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ccc; padding: 20px; display: none; } </style> </head> <body> <button id="showPopup">点击弹窗</button> <div id="popup" class="popup"> <p>这是一个弹窗</p> <button id="closePopup">关闭</button> </div> <script> // 获取元素 var showPopupBtn = document.getElementById('showPopup'); var closePopupBtn = document.getElementById('closePopup'); var popup = document.getElementById('popup'); // 点击显示弹窗 showPopupBtn.addEventListener('click', function() { popup.style.display = 'block'; }); // 点击关闭弹窗 closePopupBtn.addEventListener('click', function() { popup.style.display = 'none'; }); // 点击页面关闭弹窗 document.addEventListener('click', function(e) { if (e.target != popup && e.target != showPopupBtn) { popup.style.display = 'none'; } }); </script> </body> </html> ``` 在这个示例中，我们给“点击弹窗”按钮添加了一个点击事件，当点击该按钮时弹出弹窗。同时，我们给页面添加了一个点击事件，当点击页面时关闭弹窗。在JavaScript代码中，我们通过判断点击事件的目标元素来确定是否需要关闭弹窗。具体来说，如果点击的不是弹窗或“点击弹窗”按钮，则关闭弹窗。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值