Question

我的网络应用程序中有一堆模态窗口。不幸的是，因为所有对话框都具有相同的大小，顶部的对话框覆盖其他对拥有自定义打开事件会很好，它会检查是否打开了其他任何对话框，选择最顶层的一个和ajust（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 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')                  
                }
            });
        }
    }
});

样本： http://jsfiddle.net/dirtyd77/8dnh6/1/

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

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

2 个答案: