How to show a ModalPopup when clicked on button?

Question

When i click on a Button i must show a modal popup

ASPX code:

   <section>

       <asp:Button ID="btnShowPopup" runat="server"  Text="EditContextMenu" Visible="true" OnClick="btnShowPopup_Click" />

     <ajax:ModalPopupExtender ID="ModalPopupContextInfo" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopupContextInfo"
           CancelControlID="imgClose" BackgroundCssClass="modalBackground">
       </ajax:ModalPopupExtender>

       <asp:Panel ID="pnlpopupContextInfo" runat="server" BackColor="White" Height="560px" Width="400px" Style="display: none" >
           <div class="contextMenu_edit" >
           <div class="context_menu">

         <p>Port</p>
          <asp:TextBox ID="txtCMEditPort" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>

         <div class="clear"></div>

         <p>ProformaETA</p>
         <asp:TextBox ID="txtCMEditProformaETA" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>
         <asp:ImageButton ID="imgbtnCMEditProformaETA" runat="server" ImageUrl="~/image_repository/calendarIcon.jpg" />
         <ajax:CalendarExtender ID="ajaxcalProfrmaETA" runat="server" TargetControlID="txtCMEditProformaETA" PopupButtonID="imgbtnCMEditProformaETA" Format="dd-MMM-yyyy"></ajax:CalendarExtender>

         <div class="clear"></div>

          <p>ProformaETD</p>
         <asp:TextBox ID="txtCMEditProformaETD" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>
         <asp:ImageButton ID="imgbtnCMEditProformaETD" runat="server" ImageUrl="~/image_repository/calendarIcon.jpg" />
         <ajax:CalendarExtender ID="ajaxcalProfrmaETD" runat="server" TargetControlID="txtCMEditProformaETD" PopupButtonID="imgbtnCMEditProformaETD" Format="dd-MMM-yyyy"></ajax:CalendarExtender>
    </div>
    </div>
       </asp:Panel>
</section>

Code Behind :

           protected void btnShowPopup_Click(object sender, EventArgs e)
            {      
              ModalPopupContextInfo.Show();
            }

This is Not working.

score 0 · Accepted Answer · answered Mar 12 '13 at 07:11

You've forgotten to define imgClose control, which you use as CancelControlID in ModalPopupExtender.

<ajax:ModalPopupExtender ID="ModalPopupContextInfo" runat="server"   TargetControlID="btnShowPopup" PopupControlID="pnlpopupContextInfo"
       CancelControlID="imgClose" BackgroundCssClass="modalBackground">

That's why your extender does not work.

score 0 · Answer 2 · answered Mar 12 '13 at 07:26

Also you need to set active index for Model Popup Extender. Mostly it

ASPX Page :

"asp:button id="Button1" runat="server" text="DOWNTIME" cssclass="FormButton" width="20%"

"ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG" runat="server" TargetControlID="Button1" CancelControlID="btnCancel1" PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader"

Then

"asp:multiview id="MultiViewExpanse" runat="server"" asp:View ID="ViewInput" runat="server"

/asp:View

/asp:multiview

C#

protected void Page_Load(object sender, EventArgs e)

    {
        try
        {
            if (!IsPostBack)
            {
               ModalPopupContextInfo.ActiveViewIndex = 0;
            }
        }
     }

It works...fine...If still want some..help.... Ping me...

How to show a ModalPopup when clicked on button?

2 Answers2