3

Web アプリケーションにモーダル ウィンドウのスタックがあります。残念ながら、すべてのダイアログは同じサイズであるため、上の 1 つが他のダイアログを覆い隠します。開いている他のダイアログがあるかどうかを確認し、一番上のダイアログを選択し、(x,y) 位置を調整して、一番上のダイアログの位置にオフセットを追加するカスタム オープン イベントを用意すると便利です。何か案は？

4

2 に答える 2

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;
        });
    }               
}
于 2013-03-26T16:36:53.093 に答える
0

openイベントを使用します。私の例では、他のダイアログを探し、それらが存在する場合は、1 つを他のダイアログの上に積み重ねます。

$('.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/

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-03-26T16:35:49.030 に答える