Question

我试图通过单击外部主体来关闭覆盖窗口。问题是，即使我单击覆盖面板本身并且如果我点击其中放入的任何其他元素（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();                
       });

Answer 1

这称为event bubbling。由于模态是文档的子项，因此单击模态时，事件将传播到任何父级侦听器。这是设计的。为防止这种情况，您可以在模式上使用event.stopPropagation()。

例如：

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

$( '#myModal' ).on( 'click', function( event ) {
    event.stopPropagation();
});

值得注意的是，通过停止事件传播，也会阻止模态父元素上的任何事件。

Here是超级基本模态的一个例子。不过，老实说，你可能会从更好的模态设计中获益。积分。有一个变量来跟踪它是否开放是好的。此外，背景中的叠加层可以作为分配监听器的唯一元素。我并不是说这是最好的方式。

Answer 2

根据我的理解，你是造型：

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

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

＆＃13;

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

＆＃13;

Answer 3

使用<{1}}上的点击事件， event.currentTarget 来检查元素。

<body>

$('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 } });检查当前点击的元素是否为$currEl.is('#myModal')
myModal检查$currEl.closest('#myModal').length

Answer 4

找到了一个有效的解决方案见下文。

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

              if(e.target.id === "myModal"){
                $('#myModal').fadeOut();
              }
   });

Answer 5

您正在为整个文档添加.on('click'...)，我只会添加另一个用作背景和触发器的图层div。

我想这里的大家都认为太复杂了（尽管事实上，关于事件冒泡等的事情是正确的。）

既然您已经要求替代方案，我就是这样做的：

<!DOCTYPE html>
<html>
<style>

body {
    background: #fff;
    font-family: 'Arial', sans-serif;
    color: #888;
}

#main {
    width: 960px;
    height: 600px;
    margin: auto;
    border: 1px solid #555;
    padding: 20px;
}

.other-content {
    background: #f1f1f1;
    border: 1px solid #f6f6f6;
    padding: 20px;
}

#myModal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #545454;
}


.modal-inner-content {
    width: 300px;
    margin: 10% auto 0 auto;
    color: #666;
    padding: 20px;
    background: white;
}

</style>
<script>
// All pure, beautiful Vanilla JS
// This is only dumb toggle.. 1 and 0
function toggleModalWindow() {
// For scrollbar Handling
var body = document.getElementById('top')
// first, grab the id of the outer modal window
var modal = document.getElementById('myModal');
// Then get the "status" (open or closed) of that previously declared   variable
var status = modal.getAttribute('data-status');
    // Now we do simple if check if it is open or closed
    if(status === 'closed') {
    // Make the modal block, then manipulate it's opacity slowly
    modal.style.display = "block";
    // We hide the browser sidebar
    body.style.overflowY = "hidden";
    // don't forget to set the attributes again
        modal.setAttribute('data-status', 'open');
    } else {
    modal.style.display = "none";
    // show browser sidebar again
    body.style.overflowY = "visible";
    // don't forget to set the attributes again
    modal.setAttribute('data-status', 'closed');
    }
}

</script>
</head>
<body id="top">
<div id="main">
<div class"other-content">
    <h1>Awesome Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae saepe odio, labore ad, cum repudiandae non officia asperiores. Sequi porro magni corporis.</p>
</div>
<div class="other-content">
    <button onclick="toggleModalWindow();">show me that badASs modal</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal" data-status="closed" onclick="toggleModalWindow();">
    <!-- Modal content -->
    <div class="modal__content">
        <div class="modal-inner-content">
            <h2>Modal Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sapiente eius, asperiores ea mollitia velit accusamus soluta similique nobis modi obcaecati veritatis labore temporibus nulla, hic aliquid nam error!</p>
        </div>
    </div>
</div>
</div>
</body>
</html>

单击背景关闭叠加层

5 个答案: