Ajax Modal Popup Extender

We can design a popup window with a zooming effect with a blur backround using modalpopupextender on the click event of the LinkButton or Anchor tag or Button...

For that we have to just extend the modalpopupextender component for a button or linkbutton as you like...


For Example assume a Linkbutton as below

 <asp:LinkButton ID="lnkInvite1" runat="server" CssClass="body">Invite</asp:LinkButton>

And then we have to extend the modalpopup component for this linkbutton as below:

    <cc1:ModalPopupExtender ID="ModalPopupInvitationMail" runat="server"  TargetControlID="lnkInvite1" PopupControlID="PanelInvitationMail" BackgroundCssClass="modalBackground" OkControlID="imgClose" CancelControlID="btnCancelInvitation" PopupDragHandleControlID=""></cc1:ModalPopupExtender>

Main Properties and its action

         
     TargetControlID="lnkInvite1" - used to specify on which button click we have to arise modal popup
     PopupControlID="PanelInvitationMail" - used to specify which panel we have to display on popup
     BackgroundCssClass="modalBackground" - used to specify the BackgroundCssClass
     OkControlID="imgClose" - used to specify the ok control


And finally a panel to display a popup window

<asp:Panel id="Panel1" runat="server">

///Your Content here


</asp:Panel>




And last but not least don't forget to register Ajax Control Toolkit by using the following code:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Run the project now it will work effectively...


Cheers,

Arumugam .A