Question

我正在尝试使用jquery asp.net开发一个弹出窗体。为此，我完成了以下代码：

<script type="text/javascript">
    $("[id*=btnPopup]").live("click", function () {
        $("#dialog").dialog({
            title: "jQuery Dialog Popup",
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });
        return false;
    });
</script>

Default.aspx的：

<asp:Button ID="btnPopup" runat="server" Text="Show Popup" />
 <div id="dialog" style="display: none">
                            <asp:Panel ID="pnlPopup1" runat="server" CssClass="modalPopup" Style="display: none">
                            <div class="header">
                                Enter Your Information
                            </div>
                            <div class="body">
                                <table>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <asp:Label ID="lblf1" runat="server"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">Name</td>
                                        <td align="left">
                                            <asp:TextBox ID="txtnm1" runat="server"  Width="450px"></asp:TextBox>
                                        </td>
                                    </tr>
<div align="center">
                            <asp:Button ID="btnYes1" runat="server" CssClass="yes" OnClick="btnYes1_Click" Text="Submit" />
                            <asp:Button ID="btnNo1" runat="server" CssClass="no" OnClick="btnNo1_Click" Text="Cancel" />
                        </div>

                        </asp:Panel>
                            </div>

现在，问题是弹出窗口正在显示，但我无法看到弹出窗口中的元素。另外如何在这里更改弹出窗口的宽度。

Answer 1

从jQuery 1.7开始，不推荐使用.live（）方法。最好使用这个活动＆＃34; on（）＆＃34; （见here）

您的面板显示设置为无。这可能是一个原因。

 <asp:Panel ID="pnlPopup1" runat="server" CssClass="modalPopup">

设置高度和宽度，只需添加参数（查找有关API的更多信息here）

$("#dialog").dialog({
   title: "jQuery Dialog Popup",
   width: 470,
   height: 500,
   buttons: [
      {
          text: "Close",
          icons: {
               primary: "ui-icon-heart"
          },
          click: function() {
              $( this ).dialog( "close" );
          }
          // Uncommenting the following line would hide the text,
          // resulting in the label being used as a tooltip
          //showText: false
      }
    ]
  });

Answer 2

您的面板内容设置为display：none。

change this 
 <asp:Panel ID="pnlPopup1" runat="server" CssClass="modalPopup" Style="display: none">

to this
  <asp:Panel ID="pnlPopup1" runat="server" CssClass="modalPopup">

此外，您可以在对话框参数中设置宽度和高度：对话框（{width：number，height：number}）

Answer 3

从jQuery 1.7开始，不推荐使用.live（）方法。使用

小组Style="display: none"

中的问题

您可以按如下方式设置宽度。

<script type="text/javascript">
    $("[id*=btnPopup]").on("click", function () {
        $("#dialog").dialog({
            title: "jQuery Dialog Popup",
            width:400
            height:30
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });
        return false;
    });
</script>

asp.net jquery popup不显示弹出窗口中的元素

3 个答案: