當點擊背景時阻止隱藏自定義模式

Question

我已經創建了自定義模式（不是引導程序），並且希望它可以使它如此。如果我單擊周圍的背景，它會關閉模式。然而，隨着我放在一起的代碼，點擊模態上的任何地方也似乎關閉模態。我認爲這可能是與Z索引有關，但我試過的everthing沒有奏效。

的HTML：

<div class="overlay" onclick="closeModal();"> 
    <div class="overlay-wrap"> 
     <div class="modal"> 
      This is my modal 
      <a href="javascript:;" onclick="closeModal();">X</a> 
     </div> 
    </div> 
</div> 

的CSS：

.overlay { 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.8); 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    display:table; 
    z-index:9999; 
    .overlay-wrap { 
     display:table-cell; 
     vertical-align:middle; 
     text-align:center; 
    } 
    .modal { 
     display:inline-block; 
     text-align:left; 
     min-width:300px; 
     max-width:90%; 
     margin: 15px; 
     background: #fff; 
    } 
} 

的JavaScript：

function closeModal(ev) { 
    $(ev.currentTarget).closest('.overlay').hide(); 
} 

Answer 1

只需添加一個click event您.modal並使用event.stopImmediatePropagation。下面的代碼片段：

$(".overlay,.close").on('click',function(e){ 
 
    $(".overlay").hide(); 
 
}); 
 

 
$('.modal').on('click',function(e){ 
 
    e.stopImmediatePropagation(); 
 
});

.overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    display:table; 
 
    z-index:9999; 
 
    } 
 
    .overlay-wrap { 
 
     display:table-cell; 
 
     vertical-align:middle; 
 
     text-align:center; 
 
    } 
 
    .modal { 
 
     display:inline-block; 
 
     text-align:left; 
 
     min-width:300px; 
 
     max-width:90%; 
 
     margin: 15px; 
 
     background: #fff; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overlay"> 
 
    <div class="overlay-wrap"> 
 
     <div class="modal"> 
 
      This is my modal 
 
      <a class="close" href="javascript:;">X</a> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

只需一個監聽器添加到停止事件傳播的模式：

HTML：

個

<div class="modal" onclick="stopEvent()"> 
      This is my modal 
      <a href="javascript:;" onclick="closeModal();">X</a> 
</div> 

JS：

function stopEvent(ev) { 
     ev.stopPropagation(); 
}); 

Answer 3

$(document).ready(function(){ 
 
    
 
    $(document).on('click','#closeModal', function(){ 
 
    
 
    $('.overlay').hide() 
 
    
 
    }) 
 
    
 
    $(document).on('click','.overlay', function(){ 
 
    
 
    $('.overlay').hide() 
 
    
 
    }) 
 
    
 
})

.overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    display:table; 
 
    z-index:9999; 
 
    .overlay-wrap { 
 
     display:table-cell; 
 
     vertical-align:middle; 
 
     text-align:center; 
 
    } 
 
    .modal { 
 
     display:inline-block; 
 
     text-align:left; 
 
     min-width:300px; 
 
     max-width:90%; 
 
     margin: 15px; 
 
     background: #fff; 
 
    } 
 
}

<div class="overlay"> 
 
    <div class="overlay-wrap"> 
 
     <div class="modal"> 
 
      This is my modal 
 
      <a href="javascript:;" id="closeModal">X</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

試試這個，也許這可以幫助您。