jquery - jQueryダイアログを開いたときにコンテナdivにとどまらない

Question

デスクトップ型の環境でカスケード方式で複数のダイアログを開くコードを使用しています。この問題は、コンテナ「#desktop」div の外でダイアログが開かないようにすることです。at: および within: で配置オプションを使用して、封じ込めオプションを試しましたが、うまくいきませんでした。ドラッグ可能なオプション div を #desktop に設定すると、正しく div にとどまります。ここでテストするためのフィドルセットアップがあります。これまでの私のコードは次のとおりです。

var dialogOffset = {
    top: 10,
    left: 200
};
$('button').click(function () {
    var parent = $('#desktop');
    var parentPos = parent.offset();
    var parentIndex = $('#desktop').index(parent);
    var numDialogs = $('.dlg' + parentIndex).length;
    var dialogTop = parentPos.top + dialogOffset.top + numDialogs * 30;
    var dialogPosition = [parentPos.left + dialogOffset.left + numDialogs * 30, dialogTop];

    $('<div class="dlg' + parentIndex + '"></div>').dialog({
        position: dialogPosition,
        width: 250,
        close: function () {
            $(this).dialog('destroy').remove();
        }
    });
});

どんな助けでも素晴らしいでしょう。ありがとう。