Question

I have a situation where a user is able to open multiple independent dialogs. Intuitively, the dialog that has focus can be closed either by using the x icon or by pressing ESC.

After this dialog is closed, can the next dialog (based on the highest z-index) be given focus, so that the user could continue pressing ESC to close all their open dialogs?

Fiddle here. After loading, select any dialog, which you should be able to close by pressing ESC. The next highest dialog doesn’t get focus.

Answer 1

When the close event occurs, check for the div.ui-dialog that is visible (closing a .ui-dialog will simply hide the element) and has the highest z-index. Then set the focus on that dialog. This may not be the most efficient, but will work:

// ...
close: function() {            
    var index_highest = 0;
    var current_dialog = null;
    $('.ui-dialog').each(function() {
        // we only care about dialogs that are visible
        if ($(this).is(':visible')) {
            // always use a radix when using parseInt
            var index_current = parseInt($(this).css("zIndex"), 10);
            if(index_current > index_highest) {
                index_highest = index_current;
                current_dialog = $(this);
            }
        }
    });
    if (current_dialog) { current_dialog.focus(); }
}
// ...

An updated fiddle. Credit justkt’s answer regarding finding the element with the highest z-index using jQuery.