jQuery UI模式对话框：禁止在打开对话框时按下按键

I am using jquery-ui modal and my application uses a couple of hotkeys bound to modal-dialogs.

我正在使用jquery-ui模式，我的应用程序使用绑定到模态对话框的几个热键。

Here is my working jsfiddle example and code:

这是我工作的jsfiddle示例和代码：

$(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")})

When a modal dialog is open, it is supposed to suppress the keypressed events from traveling up the Dom-tree to the document/window. when an input element has focus (does not work with a button) stopPropagation kicks in. otherwise however event is propagated.

当打开模态对话框时，应该禁止按键事件从Dom-tree向上移动到文档/窗口。当输入元素具有焦点（不使用按钮）时，stopPropagation会启动。否则会传播事件。

What is the best way to resolve this?

解决此问题的最佳方法是什么？

2 个解决方案

#1

You can unbind $(document).keypress event when dialog is open and again bind $(document).keypress when dialog closes.

当对话框打开时，您可以取消绑定$（document）.keypress事件，并在对话框关闭时再绑定$（document）.keypress。

Here is the DEMO

这是DEMO

js code:

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

#2

Once opened, the element the dialog widget is created from apparently is removed from the DOM tree and jQuery inserts a fresh element accessible by the dialogs widget-method. The element is the one that needs to stop propagation. Anyway, technically also the modal overlay will have to be considered.

一旦打开，对话框小部件的创建元素显然会从DOM树中删除，jQuery会插入一个可由对话框widget-method访问的新元素。该元素是需要停止传播的元素。无论如何，技术上也必须考虑模态叠加。

$(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()})
})

#1