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对话框样式的z-index来解决它

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

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

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

现在重新加载页面和IT工作......

Answer 2

这是1.10.0中的一个已知错误。我通过更改叠加层的z-index来解决它。

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

Answer 3

在创建对话框后不允许移动对话框。我认为最简单和最好的解决方法是将 appendTo 移动到对话框的初始化。

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

Answer 4

看起来在版本1.10.0之后，模态解决方法不再起作用了。通过将jQuery UI版本降级到1.9.2，它应该可以再次运行。

Answer 5

我已经尝试了它应该可行。你能尝试评论一下

吗？

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

链接：jQuery UI Dialog with ASP.NET button postback

Answer 6

以下代码显示修复您的问题，为我工作：

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

在jQuery UI v1.10中，他们添加了一个appendTo属性，它似乎与调用.parent（）。appendTo（$（“form”））做同样的事情。对话框显示在灰色背景上。并且Post Post确实有效。

Answer 7

在showDialog函数的第二行，为z-index添加一个css集。应该是这样的：

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

Answer 8

Karsten的回答对我来说只是一个微小的调整。我必须在$('#workDialog').dialog...

之后移动$(".ui-widget-overlay").appendTo($("form:first"));

Jquery UI对话框也显示为灰色

8 个答案: