Justin Cooney

Web Development Tips and Examples

recent posts

about

I am a Senior Applications Programmer / Analyst with years of experience developing enterprise solutions using the Microsoft technology stack including C#, VB.NET, ASP.NET, AJAX, IIS and SQL Server. I specialize in Web application development with a focus on building secure systems, integrating applications, and designing robust database structures.

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.

Posted in , , , ,

5 responses to “The Default zIndex of a JQuery UI Dialog”

  1. Mike Pua Avatar
    Mike Pua

    The jQuery dialog option for z-index was removed on version 1.10. That’s all I know.

    Reply
  2. kevin Avatar
    kevin

    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.

    Reply
    1. Justin Cooney Avatar
      Justin Cooney

      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.

      Reply
      1. Justin Cooney Avatar
        Justin Cooney

        The issue with IE 10 turned out to be caused by quirks mode. With the correct meta tag, I have checked both versions of my script at this article, which should work well for you.

        Reply
  3. chamu Avatar
    chamu

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

    Reply

Leave a comment