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

只需隐藏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/

Answer 2

您必须先将autoOpen参数设置为false来初始化对话框。不要在click区块内进行此操作。请参阅此处的工作小提琴：https://jsfiddle.net/zs1acjh3/

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

Answer 3

您之前需要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的{{1}}上，您需要打开button，如下所示：

dialog

有关详情，请参阅 documentation here

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

3 个答案: