Why jQuery UI 1.10 remove jquery dialog zIndex option?

Question

I found the latest version of jQuery UI(1.10) remove the zIndex option. And it's confirmed on the jQuery website.

It really shocked me. Please think about this:

When we have an jqgrid, and use editrow() or addrow() to open a edit dialog to edit something, and there are many fields inside, some of which have self-defined event, such as, when you click it, it will show another jQuery dialog to show some treeview items to chose.

Under jQuery UI 1.9 (included), you can set the jQuery dialog's zIndex option to bigger than the jqgrid edit dialog's (jqgrid edit dialog support set zIndex), so the jQuery dialog always be upon and could be seen and used.

Under jQuery UI 1.10, you cant set zIndex, so the jQuery dialog is always behind the jqgrid edit dialog.

I think such scene is very common.

Why jQuery UI 1.10 remove jQuery dialog zIndex option? How to control the z-index order when there is more than one dialog?

Answer 1

I think I understand your problem. The CSS z-index for the jQuery UI dialog is not high enough to always show above your content. Here's a quick fix:

/* A class used by the jQuery UI CSS framework for their dialogs. */
.ui-front {
    z-index:1000000 !important; /* The default is 100. !important overrides the default. */
}

Answer 2

Just read the change-log from jQuery UI 1.10 (together with the bug that has been filed for it):

Removed zIndex option

Similar to the stack option, the zIndex option is unnecessary with a proper stacking implementation. The z-index is defined in CSS and stacking is now controlled by ensuring the focused dialog is the last "stacking" element in its parent.

In other words: You should property stack the elements instead of "hacking" your way to stacking using the zIndex option.

Answer 3

If you want to apply the zIndex using jQuery as soon as you instantiate the dialog, you can do the following:

$('#element').dialog({ your options... }).parent('.ui-dialog').css('zIndex',9999);