Ajax ModalPopUp Extender Example In Asp.Net

In this tutorial i will let you know Ajax ModalPopUp Extender Example In Asp.Net.The ModalPopup extender allows us to display the content on a element that mimics a modal dialog box, which prevents the user from interacting with the rest of the page.

Clicking on OK or Cancel in the modalpopup dismisses the content or optionally runs custom script.

Some of Ajax ModalPopUp Extender properties are following:

TargetControlID – The ID of the element that activates the modal popup.
PopupControlID – The ID of the element to display as a modal popup.
BackgroundCssClass – The CSS class to apply to the background when the modal popup is displayed.
DropShadow – True to automatically add a dropshadow to the modal popup.
OkControlID – The ID of the element that dismisses the modal popup.
OnOkScript – The script to run when the modal popup is dismissed using the element specified in OkControlID.
CancelControlID – The ID of the element that cancels the modal popup.

Design View:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.popup {
background-color: #ddd;
margin: 0px auto;
width: 330px;
position: relative;
border: Gray 2px inset;
}
.popup .content {
padding: 20px;
background-color: #ddd;
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="popup">
<p class="content">
This is a modal popup Extender Control.<br />
<br />
<asp:Button ID="ok" runat="server" Text="ok" />
</p>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="ok" PopupControlID="Panel2" TargetControlID="Panel1" runat="server"></asp:ModalPopupExtender>
</div>
</form>
</body>
</html>