驯服 JQuery 对话框小部件

Question

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

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

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

    FOCUS set
    ...

    event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

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

    var opts =    {      
      modal: true,
      open: function() {
        $(this).focus();
      }, 
      focus: function(event, ui) {
        console.log('FOCUS set');

        $(this)
          .keyup(function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 10 || code == 13) alert('Enter key was pressed.');
            e.preventDefault();
            console.log('key pressed.');
          });
      },
      ...
    }

    $('#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>