Jquery UI对话框也变灰

我正在使用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>


$（文档）.ready（函数（）{
$（“#工作对话框”）。对话框({
自动打开：错误，
真的，
可调整大小：false，
宽度：800，
高度：“自动”，
莫代尔：对
});
});
函数显示对话框（id）{
$（'#'+id）.parent（）.appendTo（$（“form”）；
$（'#'+id）.对话框（“打开”）；
}
函数closeModalDiv（id）{
$（'#'+id）.对话框（“关闭”）；
}

包含对话框的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>


...
我已经试过了，应该可以用了。你能试着把这句话说出来吗

 $('#' + id).parent().appendTo($("form"));

修改初始化对话框的位置，以在变量dlg2中获取对象

var dlg2 = $("#dialog1").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    width: 800,
    height: "auto",
    modal: true,
    open: function (type, data) { $(this).parent().appendTo("form"); }
});

初始化对话框后立即添加此行

$(dlg2).parent().appendTo($("form"));

你只有一个对话吗？您可以尝试在添加打开代码的对话框声明中初始化它：

$("#dialog1").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    width: 800,
    height: "auto",
    modal: true,
    open: function (type, data) { $(this).parent().appendTo("form"); }
});

链接：
看起来在1.10.0版之后，模式解决方案不再有效。通过将jQueryUI版本降级到1.9.2，它应该可以再次工作。
这是1.10.0中的一个已知错误。我通过更改覆盖的z索引解决了这个问题

$('#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"));

这是1.10.0中的一个已知错误，在旧版本中可以正常工作，但我通过更改ui对话框样式的z索引解决了它

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

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

或者在jquery-ui-1.10.0 css中查找.ui对话框类并添加“z-index:101；”样式规则

现在重新加载页面，它就可以工作了…
创建对话框后，不允许移动对话框。我认为最简单也是最好的修复方法是将附录移动到对话框的初始化

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


$（文档）.ready（函数（）{
$（“#工作对话框”）。对话框({
自动打开：错误，
真的，
可调整大小：false，
宽度：800，
高度：“自动”，
莫代尔：是的，
appendTo:“#aspnetForm”//moved append到我创建对话框的位置
});
});
函数显示对话框（id）{
$（'#'+id）.对话框（“打开”）；
}
函数closeModalDiv（id）{
$（'#'+id）.对话框（“关闭”）；
}
下面的代码显示修复您的问题，对我有用：

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

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

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

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


$（文档）.ready（函数（）{
$（“#工作对话框”）。对话框({
自动打开：错误，
真的，
可调整大小：false，
宽度：800，
高度：“自动”，
莫代尔：是的，
附录：“表格”
});
});
函数显示对话框（id）{
$（'#'+id）.对话框（“打开”）；
}
函数closeModalDiv（id）{
$（'#'+id）.对话框（“关闭”）；
}

在jQueryUIV1.10中，他们添加了一个appendTo属性，该属性的作用似乎与调用.parent（）.appendTo（$（“form”））相同。该对话框显示在灰色背景的顶部。回发也可以。
在showDialog函数的第二行，为z索引添加css集。应该是这样的：

function showDialog(id) {
    $('#' + id).parent().appendTo($("form"));
    $('#' + id).dialog("open").css({"z-index":"101"});
}

卡斯滕的回答对我有点小作用。我必须移动
$（'#workDialog'）。对话框…
在
$（“.ui小部件覆盖”）之后。附加到（$（“.form:first”）
模式掩码是z索引的，以覆盖屏幕，因此您附加到表单的任何内容都将被覆盖。是的，但我以前见过这样做，将对话框添加到对话框未灰显的基础表单中。所以它应该可以工作。我可以提高对话框的z索引吗？这能解决问题吗？代码编写的一个真实事实。。。。。一切皆有可能。试试看。。。。快乐编码：）我曾尝试给对话框div一个高
z-index
，但没有任何改变。77是的，我已经尝试过了，它将对话框附加到表单中，它给了我相同的结果，正如@Marcus指出的，1.10.0版中有一些东西消除了变通方法，降级似乎是目前的解决方案。但是谢谢你的帮助谢谢你的回答@Karsten但不幸的是，它在我的情况下不起作用。我已经添加了您的修改并删除了
$（'#'+id）.parent（）.appendTo（$（$（'form:first'））来自showDialog函数，但使用1.10.0hmm时对话框仍为灰色。这很奇怪，即使是1.10.0，它也能为我找到答案。你的答案似乎是正确的解决方案，但当我无法让它工作时，我现在必须使用Marcus答案。谢谢你的帮助。你有这个错误的链接吗？你可以这样添加样式规则。ui对话框{z-index:101！重要；}这不是上面奥扬的答案吗？你应该表扬他。