在文檔上發生ESC keydown事件時，如何在打開模式時防止窗口關閉？

Question

我已經使用keydown事件來關閉它的工作正常的窗口。但是會發生什麼情況是，當任何模式打開時，然後按Esc鍵，模式和窗口都會關閉。

所以在這裏我要的是：

• Esc鍵keydown事件如果模式是開放的，那麼它應該被關閉，然後在一次keydown事件應該關閉窗口。

否則後果自負

• Esc鍵keydown事件如果模式沒有再打開它應該關閉窗口。

直到現在我都試過這個..

$(document).keydown(function (e) { 
    if ($('#new_party_modal, #edit_party_modal, #delete_party_modal').hasClass('in') != true) { 
     switch (e.which) { 

      /* Esc Key */ 
      case 27: 
       history.back(); 
       break; 

     } 

    } 
}); 

Answer 1

是的，最後我得到了解決這個問題的方法。我所做的是這樣的：

1. 殘疾人鍵盤的默認模式選項包含Esc鍵事件

   <div class="modal" id="myModal" tabindex="-1" data-backdrop="false" data-keyboard="false" role="dialog">

在這裏有兩種相模態選擇，即。 數據背景和數據鍵盤，我已經轉向了錯誤。將數據鍵盤設置爲false將默認禁用模式默認的Esc鍵事件隱藏。

手動關閉所述模態和按條件

`

$(document).keydown(function(e){ 
    if(e.which == 27){ 
     if($('#myModal').is(':visible')){ 
      //alert("Modal opened"); 
      $('#myModal').modal("hide"); 
     } 
     else{ 
      //alert("Modal not opened"); 
      history.back(); 
     } 
    } 
}); 

這裏如果模態是打開然後是（'：可見'）將返回true，如果不打開它將返回false。然後添加代碼。

Answer 2

 $(document).keydown(function(e){ 
    if($('#new_party_modal, #edit_party_modal, #delete_party_modal').hasClass('in') != true){ 
     switch(e.which){ 

      /* Esc Key */ 
      case 27: 
       if(!$('#myModal').hasClass('in')) { 
        history.back(); 
       } 
       break; 

     } 

    } 

}); 

如果通過模態類有多個模式在你的文件，然後循環和檢查hasClass（「IN」） - 如果任何模式包含'in'類然後不觸發history.back（）;

Answer 3

如果你的html/js裏沒有這個「in」類，那麼就像下面那樣動態添加它。

$('#new_party_modal,#edit_party_modal,delete_party_modal').addClass("in"); 

然後驗證

不要求檢查 「真」 或 「假」 明確

if($('#new_party_modal,#edit_party_modal,delete_party_modal').hasClass('in')) 

。

然後刪除這個類，一旦你顯示了各自的模態。

$('#new_party_modal,#edit_party_modal,delete_party_modal').removeClass("in"); 

希望以上應該有效。

Answer 4

history.back（）;應在關閉模型後觸發。按Esc鍵關閉模型。

編寫一個單獨的函數，在模型的關閉事件上調用，並在函數內寫入「history.back（）;」

例如，如果它是一個自舉模式 「hidden.bs.modal」 事件可以像

$('#modal').on('hidden.bs.modal', function() { 
     windowClose(); 
    }); 
function windowClose(){ 
history.back(); 
}