jQuery UI的模式，對話框：在對話框打開

Question

我使用jQuery UI的語氣和我的應用程序使用一對夫婦必然模態的對話框熱鍵預防的keyPressed。

這是我的工作jsfiddle example和代碼：

$(document).keypress(function(e){console.log("pressed a key: " + e.which);}) 
var dialog = $('#modal-dialog') 
    .dialog({ modal: true, autoOpen: false, buttons: [{text:"ok"}] }); 
    .keypress(function(e){console.log("cought!"); e.stopPropagation()}) 
$("#bt").click(function(){dialog.dialog("open")}) 

當一個模式對話框打開時，它應該抑制從DOM樹向上行進到文檔/窗口中的keyPressed事件。 當輸入元素具有焦點在stopPropagation踢（不與按鈕工作）。 否則然而事件傳播。

解決此問題的最佳方法是什麼？

Answer 1

一旦打開，對話框窗口小部件從顯然創建的元件從DOM樹除去和jQuery插入由對話框窗口小部件的方法訪問的新鮮元件。 元素是需要停止傳播的元素。 無論如何，技術上還需要考慮模態疊加。

$(document).keydown(function(e){console.log("pressed a key: " + e.which);}) 
var dialog = $('#modal-dialog') 
    .dialog({ modal: true, autoOpen: false, buttons: [{text:"ok"}] }); 
$("#bt").click(function(){ 
    dialog.dialog("open") 
    .dialog("widget") 
    .keydown(function(e){console.log("cought!"); e.stopPropagation()}) 
}) 

Answer 2

您可以unbind當對話框打開$(document).keypress事件，並再次bind$(document).keypress當對話框關閉。

這裏是DEMO

JS代碼：

function bind_event() 
{ 
    $(document).keypress(function(e){console.log("pressed a key: " + e.which);}); 
} 
function unbind_event() 
{ 
    $(document).unbind('keypress'); 
} 
$(document).ready(function(){ 
    bind_event(); 

var dialog = $('#modal-dialog') 
    .dialog({ 
     modal: true, autoOpen: false, buttons: [{text:"ok"}], 
     open: function(event, ui) { 
      unbind_event(); 
      /*$(document).keypress(function(e){ 
       console.log('dialog open '+e.which); 
      });*/ 
     }, 
     close: function(event, ui) { 
      bind_event(); 
     } 
    }) 
    .keypress(function(e){ 
     console.log("cought!"); 
     e.stopPropagation() 
    }) 
$("#bt").click(function(){dialog.dialog("open")}); 
});