驯服 JQuery 对话框小部件

Question

我正在尝试解决的 JQuery 对话框小部件有 2 个问题。

1) 当对话框为模态时，在某些计算机屏幕上（缩放和分辨率可能不同），对话框会在文档中引入滚动条。对话框下方显然有一个叠加层，我假设这就是导致滚动条出现的原因。你知道我怎样才能避免这种情况发生吗 i) 在所有分辨率下和 ii) 在任何缩放时

2) 对于一个特定的对话框，我想让“Enter”按钮产生一个默认动作。到目前为止我尝试过的代码如下，但我无法使其工作。需要明确的是，我已经查看了解决方案 here。并且 div 肯定专注于打开。但是当我按 [Enter] 时，我在 Chrome 中不断收到这些控制台错误。

焦点集 ... event.layerX 和 event.layerY 在 WebKit 中被破坏和弃用。它们将在不久的将来从引擎中移除。

这是我到目前为止尝试过的代码：

变种选择 = { 模态：真， 打开：函数（）{ $(this).focus(); }, 焦点：函数（事件，用户界面）{ console.log('焦点设置'); $(这个) .keyup（函数（e）{ var code = (e.keyCode ? e.keyCode : e.which); if (code == 10 || code == 13) alert('回车键被按下。'); e.preventDefault(); console.log('按键按下'); }); }, ... } $('#mydiv').dialog(opts);

Answer 1

这是使用 Enter 关闭的解决方案：

http://jsfiddle.net/J9KvV/

JavaScript

$(document).ready(function () {
    $('#dialog').dialog();
    $(document).keydown(function (event) {
        var dialog = $('#dialog');
        if (dialog.dialog('isOpen')) {
            if (event.keyCode === 13) {
                dialog.dialog('close');
            }
        }
    });
});

HTML

<div id="dialog" title="Header">
My Window
</div>