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")}); 
});