wapt49 wapt49 - 9 months ago 26
Javascript Question

Positioning jQuery UI dialog side by side

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

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!')
title: 'Basic Dialog'


You can use the position option like:

  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.