Dialog, JavaScript, JQuery, Programming, Web Development

The Default zIndex of a JQuery UI Dialog

While I was working with a JQuery UI dialog today I noticed that some of the absolutely positioned layers on my page would overlap with a JQuery UI dialog when dragging the dialog object across the form. This broke the basic movement option of the dialog and would be unacceptable for users of the Web page.

The reason for the overlap was that the z-index of some layers on the page were at a higher index level than the default index level of the dialog. This led me to ask the question: what exactly is the default z-index of an unmodified  JQuery UI dialog?

What is the Default Z-Index of a JQuery UI Dialog

Update: Since I first wrote this article the programmers of the JQuery UI Dialog have updated the z-index of their widgets and deprecated the original methods for setting the z-index.

While in older versions of JQuery the z-index was 1002, it is now set to 100. I expect this will change again in future, but as of JQuery UI 1.10.2 the z-index is 100.

How to Change the Z-Index of a JQuery UI Dialog

The default z-index setting is useful information to know while coding and planning a page layout. If layers on your page will exceed the z-index of 1002 (100 in 1.10.2) then you will need to programmatically set your JQuery UI dialog to run at a higher z-index. If you skip this step then your dialog will not be properly drag-able which could frustrate users of your site.

Pre JQuery UI 1.10, you could update your z-index position as follows:

To adjust the z-index of your JQuery UI dialog you can use JQuery code like the following example: 
$('#element').dialog({zIndex: 3999});

Alternately you can use CSS to set the Dialog’s z-index  using the following syntax:

.ui-datepicker { z-index: 9999 !important; }

JQuery UI 1.10 and Above

UPDATE: As of JQuery 1.10, the zIndex can no longer be set in the same manner. This is explained in the JQuery 1.10 documentation . To properly work with CSS positioning, you can either code the position in your CSS, or you can change the CSS z-index in JQuery in the dialog open event. Please see this article for working example code for either of these two methods.

Advertisements

5 thoughts on “The Default zIndex of a JQuery UI Dialog”

  1. Doesn’t work anymore — redacted feature. Cant even get it to work using your CSS example.
    JQuery1.10.3 Have been trying to find solution for hours. Ideal for drag drop to keep dragged item on top of all others.

    1. Interesting, thanks for the heads up. When I tested updating the CSS z-index using JQuery, IE 10 threw errors and no longer worked, but Chrome 30.0 still interpreted the script correctly. Might be something to do with IE 10’s handling of the DOM, which has been causing lots of problems so far.

      In both browsers I can still set the styling directly in the CSS, but it would definitely be important to have browser-independent script-based access.

  2. how jquery handles multiple modal dialogs with same z-index. how doest it know which dialog should be shown in the front

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s