jqueryui - 如何獲得最頂級對話框的位置？

Question

我在我的web應用程序中有一堆模態窗口。不幸的是，因爲所有的對話框都有相同的大小，所以最高的一個覆蓋其他的。自定義打開事件會很好，該事件會檢查是否打開了其他對話框，選擇最上面的一個，並選擇一個（x，y）位置，爲最上面的對話框的位置添加一些偏移量。有任何想法嗎？

Answer 1

使用open event。在我的例子中，它會查找其他對話框，如果它們存在，則將它們堆疊在一起。

$('.dialog').dialog({ 
    open: function(event, ui) { 
     var dialogs = $('.ui-dialog:visible'); 
     if(dialogs.length > 1){ 
      dialogs.each(function(i, e){ 
       if(i===0){ 
        $(e).css('top', '0px'); 
       }else{ 
        var prevDialog = $(e).prevAll('.ui-dialog:visible'); 
        $(e).css('top', parseInt(prevDialog.css('top')) + parseInt(prevDialog.outerHeight()) + 'px')     
       } 
      }); 
     } 
    } 
}); 

DEMO： http://jsfiddle.net/dirtyd77/8dnh6/1/

希望這有助於讓我知道，如果你有任何問題！

Answer 2

你可以編寫一個函數來安排頁面上的所有jQuery UI對話框，並在open函數中調用它，就像這樣。

function arrangeDialogs() { 
    var $dialogs = $('div.ui-dialog:visible'); 

    if($dialogs.length) { 
     var $first = $($dialogs[0]); 
     var top = +$first.css('top').replace(/[^-\d\.]/g, ''); 
     var left = +$first.css('left').replace(/[^-\d\.]/g, '');      

     $('div.ui-dialog').each(function() { 
      $(this).css({top: top + 'px', left: left + 'px'}); 
      top += 5; 
      left += 5; 
     }); 
    }    
}