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

请注意，这只能在您的问题中并排工作，当屏幕上不再有 space 时将无法工作。