JS实现点击弹出层再点击任意位置隐藏弹出层

我们经常使用到弹出层。对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度。我们在使用的时候需要注意几个弹出层的注意点:

弹出层的界面需要统一,不一致的弹出层并不能增加美感,相反还会显得页面布局更加杂乱无章;

弹出层的设计一定要好看,按钮要符合项目的主色调;

弹出层的宽度固定屏幕占比,设置max-width,高度根据内容自适应;

点击其他区域能隐藏弹出层。

今天,主要说说点击其他区域隐藏弹出层 什么是事件冒泡?为什么要使用它?

事件冒泡:由最具体的元素接收(当前节点),然后逐级向上传播至最不具体的元素的节点(document);

在实现点击其他区域隐藏弹出层时,需要对document绑定点击事件,而事件冒泡会使点击其它节点时仍然触发该事件,从而造成事件冲突,导致该显示弹出层时显示不出,不该隐藏时却又隐藏了弹出层。。余斗被这个效果折磨了很久,皆是因为对事件冒泡的理解不够已经错误处理。

  1. <style type="text/css">
  2.         .layer-container{
  3.                 position: absolute;
  4.                 top: 0;
  5.                 left: 0;
  6.                 width: 100%;
  7.                 height: 100%;
  8.                 background-color: rgba(0, 0, 0, 0.5);
  9.                 display: flex;
  10.                 justify-content; center;
  11.                 align-items: center;
  12.                 display: none;
  13.         }
  14.         .layer-main{
  15.                 width: 75%;
  16.                 padding: 20px;
  17.                 max-width: 400px;
  18.         }
  19. </style>
  20.  
  21. <body>
  22. <button>显示弹出层</button>
  23.  
  24. <div class="layer-container">
  25.         <div class="layer-main">
  26.                   <div class="layer-header"></div>
  27.                   <div class="layer-content"></div>
  28.                   <div class="layer-footer">
  29.                           <div class="layer-button">确认</div>
  30.                 </div>
  31.         </div>
  32. </div>
  33.  
  34. <script>
  35.         //点击按钮,显示弹出层
  36.         $("button").bind("click", function(){
  37.                 $(".layer-container").css("display", "flex");
  38.                 event.stopPropagation();//==========阻止冒泡1
  39.         })
  40.         //点击其他区域,隐藏弹出层
  41.         $(document).bind("click", function(){
  42.                 $(".layer-container").css("display", "none");
  43.         })
  44.         //点击弹出层内确认按钮
  45.         $(".layer-button").bind("click", function(){
  46.                 console.log("点击了确认按钮")
  47.         })
  48.         //给弹出层绑定点击事件,阻止冒泡
  49.         $(".layer-main").bind("click", function(){
  50.                 event.stopPropagation();//==========阻止冒泡2
  51.         })
  52. </script>
  53. </body>

说明:

$(document)即给整个文档绑定点击事件,点击则隐藏弹出层container;

$(“button”)给按钮绑定点击事件,点击即显示弹出层container;

此处必须加event.stopPropagation()阻止冒泡,否则先执行button的事件显示弹出层container,又向上冒泡执行document事件隐藏弹出层container,导致最终点击没有效果;

$(“.layer-main”)给弹出层main绑定点击事件,点击它或冒泡到它时,即阻止继续冒泡到document;

此处的点击事件以及阻止冒泡必须加,否则点击弹出层main或里面的其他节点,都会冒泡到document,从而隐藏弹出层container,导致事件紊乱。

其实,还可以通过事件的目标(event.target)来识别当前点击的节点,从而进行接下来的操作,比如对指定的节点的特殊操作

==>>除指定区域外点击任何区域都隐藏div:

  1. $('body').click(function(e) {
  2.         var target = $(e.target);
  3.         // 如果#layer或者#btn下面还有子元素,可使用
  4.         // !target.is('#btn *') && !target.is('#layer *')
  5.         if(!target.is('#btn') && !target.is('#layer')) {
  6.               if ( $('#layer').is(':visible') ) {
  7.                         $('#layer').hide();
  8.               }
  9.         }
  10. });
  11.  
  12. $('body').click(function(e) {
  13.       if(e.target.id != 'btn' && e.target.id != 'overlay')
  14.             if ( $('#layer').is(':visible') ) {
  15.                   $('#layer').hide();
  16.             }
  17. })
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 JS实现点击弹出层再点击任意位置隐藏弹出层 https://zhutizhen.com/15052.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章