通過單擊背景關閉覆蓋

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.stopPropagation() 。

例如：

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

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

值得注意的是，通過停止事件傳播，模態的父元素上的任何事件也將被阻止。

這是一個超基本模態的例子。 不過，老實說，您可能會從更好的模態設計和集成中受益。 有一個變量來跟蹤它是否打開將是一件好事。 此外，背景中的覆蓋層可以用作分配偵聽器的唯一元素。 我並不是說這是最好的方法。

Answer 2

據我了解，您正在設計：

.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);

Answer 3

將<body>上的click事件與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 
     }
});

$currEl.is('#myModal')檢查當前單擊的元素是否為myModal
$currEl.closest('#myModal').length檢查當前元素是否位於myModal內部/子元素中

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 個解決方案

解決方案1
5 2016-07-10 15:49:46

解決方案2
5 2016-07-10 18:16:55

解決方案3
1 已采納 2016-07-10 15:51:04

解決方案4
1 2016-07-10 16:30:29

解決方案5
0

通過單擊背景關閉覆蓋

問題描述

5 個解決方案

解決方案1 5 2016-07-10 15:49:46

解決方案2 5 2016-07-10 18:16:55

解決方案3 1 已采納 2016-07-10 15:51:04

解決方案4 1 2016-07-10 16:30:29

解決方案5 0

解決方案1
5 2016-07-10 15:49:46

解決方案2
5 2016-07-10 18:16:55

解決方案3
1 已采納 2016-07-10 15:51:04

解決方案4
1 2016-07-10 16:30:29

解決方案5
0