Question

I’m having 2 issues with a JQuery dialog widget that I’m trying to solve.

1) When the dialog is modal, on some computer screens (where the zoom & resolution can vary) the dialog introduces scroll bars to the document. There’s obviously an overlay just under the dialog box, and I’m assuming that that’s what’s causing the scrollbars to appear. Do you know how I can avoid that from happening i) at all resolutions and ii) at any zoom

2) For a particular dialog, I want to make the ‘Enter’ button produce a default action. The code I’ve tried so far is below, but I can’t make it work. To be clear, I’ve already looked at the solutions here. And the div is certainly focused on opening. But I keep getting these console errors in Chrome, when I press [Enter].

    FOCUS set
    ...

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

This is the code I’ve tried so far:

    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

Here is solution for closing using 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>