Taming JQuery Dialog Widget

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

Minko Gechev · Accepted Answer · 2011-12-21 10:22:51Z

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>

edited Dec 21, 2011 at 10:22

answered Dec 19, 2011 at 18:27

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nutritioustim Over a year ago

Yes, that did it. I didn't realise you had to put the keydown event handler on the entire document itself. Cheers.

Collectives™ on Stack Overflow

Taming JQuery Dialog Widget

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related