jquery-ui - jQuery UI を使用してカスケーディング ダイアログ ボックスを作成するにはどうすればよいですか?

Question

ここにあるjQuery UIのダイアログ機能を使用しています：

http://jqueryui.com/dialog ( API はこちら)

これらのボックスの束をカスケード方式で起動したいと思います。残念ながら、画面の非常に特定の領域にかなり限定されているように見えるため、位置オプションがこれを行うとは思いません (間違っている可能性があります)。

私が現在持っているコードについては、この Fiddle を見てください: http://jsfiddle.net/bUFnE/1/

これが私のJSです：

//Code used to launch little score cards of the the leads
var boxID = 0;
$('a.manageLead').click(function() {
    boxID = boxID + 1;

    var url = this.href;

    // show a spinner or something via css
    var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');

    // open the dialog
    dialog.dialog({
        // add a close listener to prevent adding multiple divs to the document
        close: function(event, ui) {
            // remove div with all data and events
            dialog.remove();
        },
        modal: false,
        resizable: false,
        dialogClass: "dialog-box-"+boxID,
        position: { my: "center top", at: "center top" },
        title: "Lead Details"
    });

    // load remote content
    dialog.load(
        url, 
        {}, 
        function (responseText, textStatus, XMLHttpRequest) {
            // remove the loading class
            dialog.removeClass('loading');
        }
    );

    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////

      ////// THIS IS WHERE I'M TRYING TO MAKE THE MAGIC HAPPEN ///////

    var modalTop    = Number($('.dialog-box-'+boxID).css("top").replace("px", "")) + 20;
    var modalLeft   = Number($('.dialog-box-'+boxID).css("left").replace("px", "")) + 20;
    $('.dialog-box-'+boxID).css("top", modalTop+"px !important");
    $('.dialog-box-'+boxID).css("left", modalLeft+"px !important");

    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////              


    //prevent the browser to follow the link
    return false;               

});

リンクを複数回クリックして、新しく開いたダイアログを移動すると、それらが重なり合っていることがわかります。ページの上部 +20px、左 +20px をゆっくりと下っていき、200px に達したら最初からやり直してほしいと思います。