并排放置 jQuery UI 对话框

Question

我需要并排创建对话框小部件，如下所示：

每次单击按钮时，它都会创建一个对话框小部件的新实例并将其并排放置。问题是，当我每次单击按钮时，它总是在同一位置（重叠）创建新实例。知道如何创建对话框的新实例并将其并排放置吗？

这是我的code

<button id="btnCreate">Click me</button>
  $(function () {
        $("#btnCreate").click(function () {

            var $dialog = $('<div></div>')
                .html('This dialog will show every time!')
                .dialog({
                    title: 'Basic Dialog'
                })
            })
        });
    });

Answer 1

您可以使用position 选项，例如：

dialog({
  title: 'Basic Dialog',
  position: {
    my: 'left',
    at: 'right+50',
    of: $('.ui-dialog:last')
 }
});

Updated Demo

请注意，这仅适用于您的问题，并且在屏幕中没有更多空间时不起作用。