javascript - jqueryui - 如何获得最顶层对话框的位置？

Question

我的网络应用程序中有一堆模式窗口。不幸的是，因为所有对话框都具有相同的大小，所以顶部的对话框覆盖了其他对话框。最好有自定义打开事件，它检查是否打开了任何其他对话框，选择最顶部的一个并调整 (x,y) 位置，为最顶部对话框的位置添加一些偏移量。有任何想法吗？

Answer 1

您可以编写一个函数来排列页面上的所有 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;
        });
    }               
}

Answer 2

使用open事件。在我的示例中，它会查找其他对话框，如果存在，则将一个堆叠在另一个之上。

$('.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')                  
                }
            });
        }
    }
});

演示：http: //jsfiddle.net/dirtyd77/8dnh6/1/

希望这会有所帮助，如果您有任何问题，请告诉我！