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?

BONER DAN · Accepted Answer · 2013-03-13 15:32:06Z

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, 2013 at 15:32

BONER DAN

2762 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ivanchain Over a year ago

thank you, I think this will be fix it. But I wish jquery dialog not remove the zIndex option.

amenthes Over a year ago

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: contribute.jquery.org/open-source

Tech Savant Over a year ago

Didn't work for me. But this did... .ui-dialog { z-index:999 !important; }

PapillonUK Over a year ago

See this page for a good explanation of the new stacking paradigm: api.jqueryui.com/theming/stacking-elements

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 19, 2013 at 9:36

MarcoK

6,1202 gold badges30 silver badges40 bronze badges

4 Comments

ivanchain Over a year ago

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 Over a year ago

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?

JoshNaro Over a year ago

Does anyone have an example of a "proper stacking implementation" using absolutely positioned elements without a zIndex?

liserdarts Over a year ago

jQueryUI wants you to set the z-index on the ui-front css class. There is more information here. api.jqueryui.com/theming/stacking-elements

Robin Tang · Accepted Answer · 2014-09-19 01:27:52Z

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, 2014 at 1:27

Robin Tang

742 bronze badges

Comments

Dan Stotmeister · Accepted Answer · 2013-03-25 15:50:49Z

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, 2013 at 15:50

Dan Stotmeister

1

Comments

Alain Gauthier · Accepted Answer · 2014-05-30 17:03:47Z

0

Have you tried?

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

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

answered May 30, 2014 at 17:03

Alain Gauthier

8991 gold badge12 silver badges14 bronze badges

Comments

Ben · Accepted Answer · 2014-07-17 09:35:51Z

-2

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

worked for me

answered Jul 17, 2014 at 9:35

Ben

3285 silver badges17 bronze badges

2 Comments

Nek Over a year ago

If it worked for you'd been using jQuery UI version less then 1.10.

PapillonUK Over a year ago

Yes, zIndex was deprecated in ver 1.10

Collectives™ on Stack Overflow

Why jQuery UI 1.10 remove jquery dialog zIndex option?

6 Answers 6

4 Comments

4 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

4 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related