Search code examples
c#asp.netajaxcontroltoolkitmodalpopupextender

How to show a ModalPopup when clicked on button?


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.


Solution

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