jQuery Dialogs在打开时不会留在容器div中

Question

我正在使用代码在桌面类型环境中以级联方式打开多个对话框。问题是阻止对话框在容器“#desktop”div之外打开。我已经尝试了包含选项，在at：和within中使用定位选项：没有运气。我可以将draggable选项div设置为#desktop并且它正确地保留在div中。我有一个小提琴设置来测试here。到目前为止，这是我的代码：

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

任何帮助都会很棒。感谢。