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 ab

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

Have you tried using the "appendTo" option? Just dynamically add a wrapper with a z-index of what you need it to be, then use the id of that element as the selector in the "appendTo" argument.

http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

Have you tried?

$( ".selector" ).dialog( "moveToTop" );

reference: http://api.jqueryui.com/dialog/#method-moveToTop

Answer 5

 $('#element').dialog({     modal: true,
                            stack: false,
                            zIndex: 9999,
...

worked for me

Answer 6

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);