Jquery UI 对话框也呈灰色

Question

我正在使用 jquery UI 对话框来修改 ASP.NET 网站中的数据行，当打开该对话框时，我将该对话框附加到底层表单，这使我可以使用回发。 $('#' + id).parent().appendTo($("form"));

但是当我设置对话框属性modal: true时，不仅背景变灰，对话框也变灰且无法访问。

如果我删除 $('#' + id).parent().appendTo($("form")); 它会按预期工作，但我无法使用回发.

我做错了什么还是我错过了让它发挥作用的一点？

.aspx 顶部的 JavaScript

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

包含对话框的 div

<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

这是 1.10.0 中的一个已知错误，在旧版本中运行良好，但我通过更改 ui-dialog 样式的 z-index 解决了这个问题

在样式表或页面上添加以下样式

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

或者在 jquery-ui-1.10.0 css 中找到 .ui-dialog 类并添加“z-index: 101;”风格规则

现在重新加载页面，一切正常...