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.