Question

I have found that when multiple jQuery dialogs are open on a page, they are prone to overlapping.

How would I stop this, either by a built-in jQuery UI feature, or a custom bit of code?

Answer 1

You need to change the CSS z-index value for each modal window. Eg., you have invoked three modal windows at a time, each of them will have a common class and a unique id. Say this way:

<div class="jqui-modal" id="firstModal">
...
</div>

<div class="jqui-modal" id="secondModal">
...
</div>

Now you can choose which one to be first. Say, I want the #firstModal to be on top of #secondModal, the you can use this bit of CSS code:

#firstModal {z-index: 1599;}
#secondModal {z-index: 1500;}

If you want all the modal windows to be appearing on the same co-ordinates, try this:

.jqui-modal {z-index: 1600;} /* One single Z-Index for all */