Modal jQuery dialog hidden behind overlay in ASP.net
I tried the accepted answer and it appeared to work in some situations, but not others. Using the same idea, this is the code I came up with this code...
.ui-dialog {
z-index: 9999 !important;
}
...which is based on the fact that the z-index of .ui-widget-overlay is 9998.
Additionally, to fix the problem where the overlay does not cover the full height of your page (as .ui-widget-overlay only has a height of 1000%), I came up with this:
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You need to stop using appendTo like this and use the new dialog option "appendTo"
like this:
$( ".selector" ).dialog({ appendTo: "#someElem" });
Taken from jquery-ui documentation http://api.jqueryui.com/dialog/#option-appendTo
I fixed it. There aren't many people who're complaining about this issue. Is it just me? Anyway, here is how I fixed it. Quite simple when you know how.
.ui-widget-overlay
{
z-index: 0;
}