Jquery UI dialog box, is grayed out too

This is a known bug in 1.10.0 and works fine in older versions but I SOLVED it by changing the z-index for the ui-dialog style

add following style in your stylesheet or on page

.ui-dialog{    z-index: 101;}

OR find .ui-dialog class in jquery-ui-1.10.0 css and add "z-index: 101;" style rule

now reload page and IT WORKS...

This is a known bug in 1.10.0. I solved it by changing the z-index for the overlay.

$('#workDialog').dialog({            modal: true,            width: 400,            height: 200,            appendTo: $("form:first")        });        var dz = $(".ui-front").css("z-index")        $(".ui-widget-overlay").css({ "z-index": dz - 1 });        $(".ui-widget-overlay").appendTo($("form:first"));

It's not allowed to move the dialog after it's been created. I think the easiest and best fix is to move the appendTo to the initialization of the dialog.

<script type="text/javascript">$(document).ready(function () {    $('#workDialog').dialog({        autoOpen: false,        draggable: true,        resizable: false,        width: 800,        height: "auto",        modal: true,    appendTo: "#aspnetForm" // moved append to where the dialog i created    });});function showDialog(id) {    $('#' + id).dialog("open");}function closeModalDiv(id) {    $('#' + id).dialog("close");}</script>