jQuery UI 对话框内容显示在页面本身中

Question

我的应用程序中有 jQuery UI 对话框，单击按钮将打开 Diag div 中定义的此 jQuery UI 对话框内容。我在同一页面上还有其他控件，例如 asp.net 下拉列表。我遇到的问题是 jQuery UI 对话框 div 内容显示在页面本身中，而不是显示在弹出的对话框中。我需要做什么才能使对话框 div 在页面上不可见。

    <asp:DropDownList ID="dd" runat="server" AutoPostBack="true">
        <asp:ListItem>asfasf</asp:ListItem>
        <asp:ListItem>asfasf</asp:ListItem>
    </asp:DropDownList>
    <input type="button" id="btnSaveAs" value="Submit" />
    <div id="Diag">
        Test text
    </div>

jQuery 代码

  $(function () {
        $('#btnSaveAs').on('click', function () {
            $("#Diag").dialog({
                resizable: false,
                width: 400,
                height: "auto",
                modal: true,
                title: 'new window',
                buttons: {
                    "Save Record": addUser,
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
   });

Answer 1

您必须首先将 autoOpen 参数设置为 false 来初始化对话框。不要在 click block 内执行此操作。 请参阅此处的工作 fiddle :https://jsfiddle.net/zs1acjh3/

然后，单击按钮时，调用对话框: $("#Diag").dialog("open");