javascript - Single ESC closes ALL modal dialogs in jQuery UI. Workarounds? - Stack Overflow

admin管理员组

文章数量:1405548

Actually, there was (is still) a bug in jQuery: .

The reason for this behavior (from the bug description ments): "The dialog itself binds keydown event to itself for closing the dialog on ESC; in addition, the dialog overlay binds a keydown event to the document, without filtering to close only the active dialog."

I cannot e up with an idea of an acceptable workaround. Is there anyone who has had to deal with it yet?

Actually, there was (is still) a bug in jQuery: http://bugs.jqueryui./ticket/4511.

The reason for this behavior (from the bug description ments): "The dialog itself binds keydown event to itself for closing the dialog on ESC; in addition, the dialog overlay binds a keydown event to the document, without filtering to close only the active dialog."

I cannot e up with an idea of an acceptable workaround. Is there anyone who has had to deal with it yet?

• javascript
• jquery-ui
• dialog
• keyboard-shortcuts
• modal-dialog

Share Improve this question Follow edited Jul 1, 2012 at 19:38 Alex Pakka asked Jan 20, 2011 at 6:20 Alex PakkaAlex Pakka 9,70633 gold badges4949 silver badges7171 bronze badges 3

• 1 Don't show multiple modal dialogs simultaneously. That's bad UI, and probably the reason this bug (actually a duplicate of this one: bugs.jqueryui./ticket/3539) hasn't been touched in 2 years. – coreyward Commented Jan 20, 2011 at 6:25
• 1 I cannot think of a better solution in my case. It is quite standard. I have a jqGrid that on click in certain cells opens a history of the object (10-200 lines in most cases) with a header offering some actions. Each history message has "view details". It is quite natural to stack two modal dialogs on top of each other in this situation. But I am open to suggestions... Also, actions on the first dialog can prompt warnings (e.g. Delete asks for confirmation) – Alex Pakka Commented Jan 20, 2011 at 6:33
• Tried with non-modal dialogs. Here, 'Esc' closes only the last opened dialog (even if it is in a background). Pressing Esc again has no resul. But it might be a way to go, with some changes (keep only one dialog of the same type open, process Esc 'manually'). Will try it out. – Alex Pakka Commented Jan 20, 2011 at 6:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Very simple - upon creating a modal dialog, run this:

$([document, window]).unbind('.dialog-overlay'); 

If you create more then one modal dialog, hitting ESC will close the top one only. Then once you focus on the bottom dialog, hit ESC and it will close it as well.

Hope this helped!

P.S. jQuery UI developers should add an option when you want all dialogs close at once upon hitting ESC key or only the focused ones.

Easiest thing is I have added event.stopPropagation(); in close function before return self; in jquery.ui.dialog.js file. And I am done with problem of closing dialog boxes one by one on escape keydown. Let me know if anyone find any better solution.

EDITED: this need to add because while clicking on close button event object is undefined.

if(typeof event != 'undefined'){ event.stopPropagation(); }

The root of the problem is that jQuery UI keydown event propagates through all dialogs. A fix in the original jQueryUI Dialog code would be to add event.stopPropagation() when topmost dialog was successfully closed and check event.isPropagationStopped() at the beginning of the same keydown event.

As a workaround I did, thanks for Jazzer, the following.

1. Set dialog option closeOnEscape to false

2. When dialog gets created, append:

   //newDialog is dialog's content, e.g. var newDialog = $('my dialog content>');
   newDialog.keydown(function(event) {
        if (mydialogs.hasOpenDialogs() && 
            event.keyCode && 
            event.keyCode === $.ui.keyCode.ESCAPE) {
                           $(newDialog).dialog("close");
                           event.preventDefault();
   
                           event.stopPropagation();
       }
   });
   

3. when document is loaded do:

   $(function(){
   //allow for ESC to close only top dialog
   $(document).bind('keydown', function(event) {
       if (event.isPropagationStopped()) return true;
       if (mydialogs.hasOpenDialogs() && 
           event.keyCode && 
           event.keyCode === $.ui.keyCode.ESCAPE) {
                           mydialogs.closeTopDialog();
                           event.preventDefault();
                           event.stopPropagation();
       }
   });
   });
   

Event in (2) happens when user hits ESC while typing text in input box inside of the dialog. Event in (3) happens when user hits ESC somewhere else.

mydialogs here is a wrapper around stack (array) of modal dialogs, where every new dialog adds itself via .push() and in .close() removes itself with .pop().

本文标签： javascriptSingle ESC closes ALL modal dialogs in jQuery UI WorkaroundsStack Overflow