Jquery UI 1.10: Dialog and Zindex Option

jQuery UI 1.10: dialog and zIndex option

You don't tell it, but you are using jQuery UI 1.10.

In jQuery UI 1.10 the zIndex option is removed:

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.

you have to use pure css to set the dialog "on the top":

.ui-dialog { z-index: 1000 !important ;}

you need the key !important to override the default styling of the element; this affects all your dialogs if you need to set it only for a dialog use the dialogClass option and style it.

If you need a modal dialog set the modal: true option see the docs:

If set to true, the dialog will have modal behavior; other items on
the page will be disabled, i.e., cannot be interacted with. Modal
dialogs create an overlay below the dialog but above other page
elements.

You need to set the modal overlay with an higher z-index to do so use:

.ui-front { z-index: 1000 !important; }

for this element too.

Why jQuery UI 1.10 remove jquery dialog zIndex option?

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

z-index of Dialog

It turns out that I was referencing a custom jQuery UI Theme built for an old version of jQuery UI.

Referencing the base theme for the version I'm now using resolved this issue.

For upgrading a custom theme to the current version, see

How to upgrade a custom jQuery UI theme?

jquery dialog zindex increases each time it opens

change this:

$('#userDet').dialog({
    bgiframe: true,
    autoOpen: false,
    open: function (event, ui) {
        //do nothing
    },
    close: function (event, ui) {
        //do nothing
    },
    width: 470,
    modal: false,
    zIndex: 9999,
    stack: false
});

jQuery UI Modal Dialog appearing underneath certain elements

You should change the z-index property in CSS of the elements appearing on top of the dialog to a lower number. Sounds like it's higher than that of the actual dialog at the moment, hence your problems

JQuery UI Dialog not properly shown on top of Leaflet

You can achieve it by defining the z-index using css on the class ui.dialog:

.ui-dialog { z-index: 1000 !important ;}

you should check this SO post: jQuery UI 1.10: dialog and zIndex option

jQueryUI autocomplete not working with dialog and zIndex

Try setting the appendTo option to "#copy_dialog":

$(/** autocomplete-selector **/)
    .autocomplete("option", "appendTo", "#copy_dialog");

This option specifies which element the autocomplete menu is appended to. By appending the menu to the dialog, the menu should inherit the correct z-index.

placing jQuery dialog box above div

In jQuery UI 1.10 the zIndex option is removed:

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.

You will have to use css to set the dialog "on top", like this:

.ui-dialog { z-index: 1000 !important;}

You need the !important to override the default styling of the element.

The value specified for the z-index must set higher than the div.

This affects all your dialogs if you need to set it only for a dialog use the dialogClass property.

---

Related Topics