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?

score 26 · Accepted Answer · answered Mar 13 '13 at 15:32

26

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. */
}

answered Mar 13 '13 at 15:32

BONER DAN

276
2
2

1

thank you, I think this will be fix it. But I wish jquery dialog not remove the zIndex option. – ivanchain Mar 16 '13 at 09:23
jQuery UI is open source, so you _can_ influence what's in there and what now. If you have valid reasons they will probably listen to you. You can get startet here: http://contribute.jquery.org/open-source/ – amenthes Jul 17 '14 at 09:48
2

Didn't work for me. But this did... .ui-dialog { z-index:999 !important; } – Tech Savant Mar 13 '15 at 09:46
See this page for a good explanation of the new stacking paradigm: http://api.jqueryui.com/theming/stacking-elements/ – PapillonUK Apr 24 '15 at 22:36

score 6 · Answer 2 · edited Jun 20 '20 at 09:12

6

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 19 '13 at 09:36

MarcoK

6,090
2
28
40

6

But use the option zIndex is a very simple way to control the z-order, I don't think it's a "hacking way". How to stack the element property? The focused dialog is not always the last stacking element in its parent when there are a lot object. – ivanchain Feb 22 '13 at 16:17
MarcoK, do you mean the jquery UI 1.10 will make the focused dialog be stacking on the top automatically? I found it's not. Or what I need to do to make it stacking to the top? – ivanchain Feb 22 '13 at 16:29
4

Does anyone have an example of a "proper stacking implementation" using absolutely positioned elements without a zIndex? – JoshNaro May 21 '13 at 16:25
jQueryUI wants you to set the z-index on the ui-front css class. There is more information here. http://api.jqueryui.com/theming/stacking-elements/ – liserdarts May 20 '15 at 23:33

score 2 · Answer 3 · answered Sep 19 '14 at 01:27

2

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

answered Sep 19 '14 at 01:27

Robin Tang

74
2

score 0 · Answer 4 · answered Mar 25 '13 at 15:50

0

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

answered Mar 25 '13 at 15:50

Dan Stotmeister

1

score 0 · Answer 5 · answered May 30 '14 at 17:03

0

Have you tried?

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

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

answered May 30 '14 at 17:03

Alain Gauthier

820
1
12
14

score -2 · Answer 6 · answered Jul 17 '14 at 09:35

-2

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

worked for me

answered Jul 17 '14 at 09:35

Ben

188
2
16

If it worked for you'd been using jQuery UI version less then 1.10. – Nek Apr 13 '15 at 15:38
Yes, zIndex was deprecated in ver 1.10 – PapillonUK Apr 24 '15 at 22:32

Why jQuery UI 1.10 remove jquery dialog zIndex option?

6 Answers6

Linked