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.