jqueryui - how to get position of the top-most dialog?

Question

I have a stack of modal windows in my web appliaction. Unfortunately because all dialogs have the same size, top one covers other ones. It would be nice to have custom open event, which checks if there are any other dialogs opened, select top-most one and ajust (x,y) position adding some offset to the position of the top-most dialog. Any ideas?

Answer 1

You could write a function to arrange all of the jQuery UI dialogs that are on a page and call that in the open function, something like this.

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