wapt49 wapt49 - 5 months ago 16
Javascript Question

Positioning jQuery UI dialog side by side

I need to create dialog widget side by side like this as shown below:
Image

Every time I click the button, it should create a new instance of dialog widget and position it side by side. The problem, when every time I click the button, it always create new instance in the same position (overlapping). Any Idea how I can create the new instance of dialog and position it side by side?

This is my 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'
})
})
});
});

T J T J
Answer

You can use the position option like:

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

Updated Demo

Note that this only works side by side as in your question and won't work when there is no more space in screen.