CODEWITHSUNDEEP
jqueryasp.net
user3305327
user3305327

Reputation: 907

asp.net jquery popup not displaying the elements in the popup

I am trying to develop a popup form using jquery asp.net. To achieve this I have done the following code:

<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>

Now, the problem is the popup is displaying but I can't see the elements inside the popup. Also how to change the width of the popup here.

Upvotes: 0

Views: 262

Answers (3)

Razieltje
Razieltje

Reputation: 357

As of jQuery 1.7, the .live() method is deprecated. it's better to use the event "on()" (see here)

your panel has display set to none. This could be a reason.

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

to set height and width, simply add the parameters (find more info on the 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
      }
    ]
  });

Upvotes: 1

Nagaraj S
Nagaraj S

Reputation: 13484

As of jQuery 1.7, the .live() method is deprecated.Use on

Problem in your panel Style="display: none"

You can set your width as follows..

<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>

Upvotes: 0

mrpotocnik
mrpotocnik

Reputation: 1141

Your panel with content is set to 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">

Also, you can set width and height in your dialog parameters: dialog({width:number, height: number})

Upvotes: 0

Related Questions