Jquery UI dialog box, is grayed out too
asp.net, jquery, jquery-ui
Solution
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...
Problem
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> ```