JQuery UI dialog error 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 problem I'm facing 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 that I can no longer access to the header to move it.

In a script, of course, there can be many things that may be the culprits - although for me there is nothing obvious, that is, I do not have code that indicates that by opening or closing the dialog, move any other dialogs.

So my question is: has anyone experienced this before in any capacity, and / or someone has an idea of ​​what might lead to this - all that I can use to start tracking the culprit would be helpful.

Thanks -

Answer 1

I had similar problems and only in IE with jquery-ui 1.8.16. This looks like a known issue , and I used the following method

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

from this solution and decided it. You might try too.

Answer 2

Try setting the position of the dialog box when it opens.

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

Before setting up the dialog, initialize x and y to offset, depending on where you want the dialog to appear.

For instance:

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

You need to figure out how to determine the x and y offsets for your application, but this should fix the position of the dialog so that it does not move randomly when using other dialogs.