jquery ui dialog, having multiple dialogs affects position

Question

Hello,

As I am making multiple dialogs, I am faced with difficulties. Here is my code:

var dialog_count = 3;

$(function() {

    var left_value = 0;
    var top_value = 0;
    for(var i = 1; i < dialog_count+1; i++) {
        $('.dialog_' + i).dialog({ width: 263, position: [800 - left_value, 800 - top_value] });
        left_value = left_value + 40;
        top_value = top_value + 140;
    }
});

what it should do: neatly stack each dialog on given position

what it does: somehow re-positions each dialog as new ones gets added.

I tried playing around with it, here's what I did, in 3 steps

$('.dialog_1').dialog({ width: 263, position: [300, 700] });

this is correctly positioned, now i am going to add 2nd one.

$('.dialog_1').dialog({ width: 263, position: [300, 700] });
$('.dialog_2').dialog({ width: 263, position: [250, 550] });

da heck? it moved the other one by itself... now both of them are not correctly positioned.

$('.dialog_1').dialog({ width: 263, position: [300, 700] });
$('.dialog_2').dialog({ width: 263, position: [250, 550] });
$('.dialog_3').dialog({ width: 263, position: [200, 400] });

alright, now things look funky. you really have to try it yourself to understand what I am talking about... ;(

thank you advance!

Answer 1

Running the sample code, I'm not seeing the original one move. I do notice they don't stack correctly, but I think that's because you're adding 140 to one and 40 to the other. That may have been a typo though.

top_value = top_value + 140; // Try + 40 instead

Answer 2

After disabling autoOpen, and having to set positions through options, and calling open method, successfully has worked.

Turns out, the autoOpen feature doesn't let dialogs to be positioned exactly on top of each other, so it moves them around accordingly.

var dialog_count = 3;

$(function() {

    var left_value = 0;
    var top_value = 0;
    for(var i = 1; i < dialog_count+1; i++) {
        $('.dialog_' + i).dialog({ width: 263, position: [500, 500], autoOpen: false });
    }
    for(var i = 1; i < dialog_count+1; i++) {
        $('.dialog_' + i).dialog("option", "position", [500,500]);
        $('.dialog_' + i).dialog("open");
    }
});