Jquery UI dialog box, is grayed out too

Question

I'm using a jquery UI dialog to modify a data row in a ASP.NET website, When opening the dialog I append the dialog to the underlaying form, this gives me the possibility of using postbacks. $('#' + id).parent().appendTo($("form"));

But when I set the dialog property modal: true Not just the background is grayed out, the dialog is also gray and inaccessible.

If I remove the $('#' + id).parent().appendTo($("form")); it works like supposed to but then i can't use postbacks.

Am I doing something wrong or do i miss a point to get this to work?

Javascript in top of .aspx

<script type="text/javascript">
    $(document).ready(function () {

        $('#workDialog').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            width: 800,
            height: "auto",
            modal: true
        });
    });

    function showDialog(id) {
        $('#' + id).parent().appendTo($("form"));
        $('#' + id).dialog("open");
    }

    function closeModalDiv(id) {
        $('#' + id).dialog("close");
    }
</script>

The div containing the dialog

<div id="workDialog" title="Basic dialog">
    <asp:UpdatePanel ID="upWorkDialog" runat="server" UpdateMode="Conditional">  <ContentTemplate>
        <table id="Table1" class="item">
        <tr>
            ...
        </tr>
        <tr>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
        </tr>
        </table>
        <asp:Label ID="lblWorkEditError" runat="server" Text=""></asp:Label>

        <asp:Button ID="btnSave" runat="server" Text="Gem" OnClick="btnSave_Click" />
        <asp:Button ID="btnCancel" runat="server" Text="Annuller" OnClientClick="javascript:closeModalDiv('workDialog');" />
    </ContentTemplate></asp:UpdatePanel>
</div>

Answer 1

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...

Answer 2

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"));