Why jQuery UI 1.10 remove jquery dialog zIndex option?
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
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. */
}