ModalPopupExtender Control In Ajax

The ModalPopupExtender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.
You can provide OnShowing/OnShown/OnHiding/OnHidden animations which are played when the modal content is shown and hidden. For example, you can use these animations to fade-in and fade-out modal content.

ModalPopupExtender Properties:-
1. TargetControlID: - The ID of the element that activates the modal popup
2. PopupControlID: - The ID of the element to display as a modal popup
3. BackgroundCssClass :- The CSS class to apply to the background when the modal popup is displayed
4. DropShadow :- True to automatically add a drop-shadow to the modal popup
5. OkControlID: - The ID of the element that dismisses the modal popup
6. OnOkScript :- Script to run when the modal popup is dismissed with the OkControlID
7. CancelControlID: - The ID of the element that cancels the modal popup
8. OnCancelScript :- Script to run when the modal popup is dismissed with the CancelControlID
9. PopupDragHandleControlID: - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
10. X: - The X coordinate of the top/left corner of the modal popup (the popup will be centred horizontally if not specified)
11. Y: - The Y coordinate of the top/left corner of the modal popup (the popup will be centred vertically if not specified)
12. RepositionMode: - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled.

To Show the programmatically Popup:-
ModalPopupExtender1.Show();

To Hide the programmatically Popup:-
ModalPopupExtender1.Hide();

The ModalPopupExtender supports four animation events that allow you to spice up its showing and hiding with visual effects:

<Animations>
 <OnShowing></OnShowing>
<OnShown></OnShown>
 <OnHiding></OnHiding>
<OnHidden></OnHidden>
 </Animations>

Example:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupExtender.aspx.cs" Inherits="ModalPopupExtender" %>

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

<style type="text/css">
 .modalBackground
{
 background-color: Gray;
 filter: alpha(opacity=70);
 opacity: 0.7;
}
 </style>


<form id="form1" runat="server">
 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
 </asp:ToolkitScriptManager> <div style="text-align: center">
 <asp:LinkButton ID="LinkButton1" runat="server" Text="Click Here"></asp:LinkButton> &nbsp;to Open Popup Window
<asp:Panel ID="Panel1" runat="server" Width="500" BorderStyle="Solid" BorderColor="BlueViolet" BorderWidth="2" BackColor="YellowGreen">
<asp:Panel ID="Panel2" runat="server" Style="cursor: move; background-color: yellow; border: solid 1px Gray; color: Black" Height="30">
 <b style="font-size: 20px">Popup Window</b>
 </asp:Panel>
 <div>
 <p> <b>ASP.NET AJAX Modal Popup Window</b> </p>
<p style="text-align: justify;"> The ModalPopupExtender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it. </p>
 <hr style="border-width: 2px" />
<p style="text-align: center;">
 <asp:Button ID="OkButton" runat="server" Text="OK" Width="70" /> &nbsp;
<asp:Button ID="CancelButton" runat="server" Text="Cancel" Width="70" />
 </p>
</div>
 </asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1" PopupDragHandleControlID="Panel2" BackgroundCssClass="modalBackground" OkControlID="OkButton" CancelControlID="CancelButton" DropShadow="true" RepositionMode="RepositionOnWindowResizeAndScroll" />
 </div>
</form>

Output:-