如何在關閉另一個對話框後提供下一個最高對話框焦點

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。