问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

通过单击背景关闭叠加层

社区维基
1
新手上路，请多包涵

我试图通过仅单击外部主体来关闭覆盖窗口。问题是，即使我点击覆盖面板本身，如果我点击我放入其中的任何其他元素（div、按钮、图标等…），覆盖也会关闭，我不知道如何只定位叠加层周围的主体，而不是叠加层窗口本身。你能帮忙吗？

这是 html 标记和相关的 JS。

 <div id="main">
    <div class"other-content">
        <!-- other content -->
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal__content">
            <!-- some content - divs, buttons etc etc -->
        </div>
    </div>
</div>


        $(document).on('click',"#myModal", function(e) {
          $('#myModal').fadeOut();
       });

原文由 Beppe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmlcss
阅读 354
2 个回答
得票最新
社区维基
1
✓ 已被采纳

在 <body> 上使用点击事件，使用 event.currentTarget 检查元素。

 $('body').on('click',function(e) {
     var $currEl = $(e.currentTarget);
     if(!$currEl.is('#myModal') && !$currEl.closest('#myModal').length){
        $('#myModal').fadeOut();
     }
     else if(/write code element which triggers modal open even/){
        $('#myModal').fadeIn(); //or any code to trigger modal open
     }
});
  1. $currEl.is('#myModal') 检查当前点击的元素是否为 myModal
  2. $currEl.closest('#myModal').length 检查当前元素是否在 myModal

原文由 Shaunak D 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

据我了解，您正在设计样式：

  • .modal 宽度和高度为 100%，位置固定。它还具有不透明背景，并通过更大的 z-index 保持在一切之上。
  • .modal-content 包含所有需要的内容，不同的背景颜色。

请尝试以下代码来检测用户在模态内容中、内部或外部单击的位置。

 (function ($) {
    $('.modal').on('click', function (e) {
        //Check whether click on modal-content
        if (e.target !== this)
            return;

        $(this).fadeOut();
    });
})(jQuery);

原文由 trungk18 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题