如何在关闭另一个对话框后给出下一个最高对话框焦点

Question

我有一种情况，用户可以打开多个独立的对话框。直观地，可以通过使用x图标或按ESC来关闭具有焦点的对话框。

关闭此对话框后，下一个对话框（基于最高z-index）是否可以聚焦，以便用户可以继续按ESC关闭所有打开的对话框？

Fiddle here。加载后，选择任何对话框，按ESC键即可关闭。下一个最高的对话框没有得到关注。

Answer 1

发生close事件时，请检查可见的div.ui-dialog（关闭.ui-dialog只会隐藏元素）并具有最高z-index。然后将焦点设置在该对话框上。这可能不是最有效的，但可行：

// ...
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。关于使用jQuery查找具有最高z-index的元素的信用justkt's answer。