Ajax Modal Popup Extender

Arumugam A
15y
8.2k
0
0

Blog

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

Up Next