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

【问题标题】：jQuery UI dialog content is showing up in page itselfjQuery UI 对话框内容显示在页面本身
【发布时间】：2015-09-23 19:17:57
【问题描述】：

我的应用程序中有 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");
                    }
                }
            });
        });
   });

【问题讨论】：

标签： jquery asp.net jquery-ui jquery-ui-dialog

【解决方案1】：

您必须首先将autoOpen 参数设置为false 来初始化对话框。不要在click 块内执行此操作。在这里查看工作小提琴：https://jsfiddle.net/zs1acjh3/

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

【讨论】：

【解决方案2】：

您需要先initialize 并将其autoOpen 设置为false 以在页面加载时隐藏它。点击按钮后，您可以只显示dialog box，如下所示：

var dialog;
$(document).ready(function(){
     dialog = $("#Diag").dialog({
                autoOpen:false, //set this to hide at initial stage
                resizable: false,
                width: 400,
                height: "auto",
                modal: true,
                title: 'new window',
                buttons: {
                    "Save Record": addUser,
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
     });
})

在click 或button 上，您需要打开dialog，如下所示：

$('#btnSaveAs').on('click', function () {
     dialog.dialog( "open" );
});

欲了解更多信息，请参阅此documentation here

【讨论】：

【解决方案3】：

只需隐藏Diag中的内容。

$("#Diag").hide();

然后让对话框在点击按钮时显示内容。

http://jsfiddle.net/mL29zsLh/

作为附加说明，我建议将dialog 事件处理程序移到click 事件之外，这样您就不会每次都尝试重新附加。

这可以放在你的DOM准备函数中，如下所示。

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

注意添加了autoOpen: false。然后只需通过以下方式打开对话框：

$("#btnSaveAs").on("click", function() {
     $("#Diag").dialog("open"); 
});

http://jsfiddle.net/mL29zsLh/1/

【讨论】：