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; 
     }); 
    }    
}