19

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

8 回答 8

28

这是 1.10.0 中的一个已知错误，在旧版本中工作正常，但我通过更改 ui-dialog 样式的 z-index 解决了它

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

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

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

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

于 2013-02-09T10:13:02.310 回答
6

这是 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"));
于 2013-02-01T12:05:45.520 回答
4

对话框创建后不允许移动。我认为最简单和最好的解决方法是将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>
于 2013-05-09T12:23:40.347 回答
1

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

于 2013-02-01T11:34:48.237 回答
0

我已经尝试过了，它应该可以工作。你能试着注释掉这条线吗

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

链接：带有 ASP.NET 按钮回发的 jQuery UI 对话框

于 2013-01-31T22:38:20.013 回答
0

下面的代码显示解决您的问题，为我工作：

<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")) 做同样的事情。该对话框出现在灰色背景的顶部。并且回发确实有效。

于 2013-05-27T06:40:06.587 回答
0

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

function showDialog(id) {
    $('#' + id).parent().appendTo($("form"));
    $('#' + id).dialog("open").css({"z-index":"101"});
}
于 2013-11-23T15:42:24.903 回答
0

卡斯滕的回答对我有用，只是稍作调整。我必须$('#workDialog').dialog...搬家$(".ui-widget-overlay").appendTo($("form:first"));

于 2014-03-04T15:07:17.230 回答