JQuery UI Dialog Issue with Multiple Dialogs

Question

I have several dialogs (jquery-ui-ified), they all look something like this:

$('#options_dlg').dialog({
    modal:true,
    stack:true,
    autoOpen:false,
    resizable:false,
    title:'Options',
    height:620,
    width:520,
    zIndex:20000 
});

The issue I am experiencing is that when i have a dialog open, and then I open another dialog, or close another dialog, it re-positions the first dialog - sometimes moving it so I can no longer access the title-bar to move it around.

There are of course numerous things going on in the script that may be the culprit - although nothing that is obvious to me -- meaning, I have no code that specifies that by opening or closing a dialog, than it should relocate any other dialogs.

So my question is, has anyone experienced this before in any capacity, and/or does anyone have any insight as to what could cause this to happen -- anything at all I can use to begin tracking down the culprit would be helpful.

Thanks -

Answer 1

I did have similar issues in and only in IE with jquery-ui 1.8.16. It looks like a known issue and I used the following method

$dialog.parent().css({position:"fixed"}).end().dialog('open');

from this solution and solved it. You might have a try, too.

Answer 2

Try setting the position of the dialog box when you open it.

$('#options_dlg').dialog({
    modal:true,
    stack:true,
    autoOpen:false,
    resizable:false,
    title:'Options',
    position: [x,y],
    height:620,
    width:520,
    zIndex:20000 
});

And before you set up the dialog, initialize x and y to be offsets depending on where you want the dialog to appear.

For example:

x = $(cell).offset().left + $(cell).outerWidth();
y = $(cell).offset().top - $(document).scrollTop();

You'll have to figure out how to determine the x and y offsets for your application, but that should fix the dialog position so that it does not move randomly when other dialogs are used.