placing jQuery dialog box above div

Question

I am new to jQuery and I am having trouble while placing jQuery box above a div.
I have a div with a button in it and on click of the button, JQuery dialog box opens.
The problem is dialog box is appearing behind the div and i want to place it above the div.

I have searched the solution and found that specifying zIndex may solve the problem. But i am using jquery-ui-1.10.3.min.js and zIndex is not supported for the version.

Please suggest any possible solution.

$("#mydialog").dialog({
  resizable: false,
  modal: true,
  title: "title",
  buttons: {
    Ok: function() {
    $(this).dialog("close");
  }
}

Answer 1

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.

Answer 2

Try using firebug or developer tools to get the id or class of the element in question then in you css, set it's z-index to be higher

Answer 3

Because The CSS z-index for the jQuery UI dialog is not high enough to always show above your content All you have to do is override the z-index for class (ui-dialog) in your css

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