并排定位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

请注意，这只会在您的问题中并排运作，并且在屏幕上没有更多空间时无法正常工作。