In this article I will explain with an example, how to build a Modal Popup using AJAX ModalPopupExtender control.
 
 

Installing and Registering AjaxControlToolkit package using Nuget

In order to install and register AJAX Control Toolkit library using Nuget, please refer my article Install AjaxControlToolkit library using Nuget.
 
 

HTML Markup

The HTML Markup consists of following controls:
ScriptManager – For enabling ASP.Net AJAX.
Button – For triggering the Modal popup to open.
ModalPopupExtender – For displaying Modal popup.
The AJAX ModalPopupExtender has been assigned with following properties:
PopupControlID – The control which will be displayed as Modal popup.
TargetControlID – The control which opens the Modal popup.
CancelControlID – The control which closes the Modal popup.
 
Panel – For displaying content of the Modal popup.
Button – For closing the Modal popup dialog box.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
 
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
    CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
    This is an ASP.Net<br /> AJAX ModalPopupExtender Example<br /><br /><br /><br /><br />
    <asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>        
<!-- ModalPopupExtender -->
 
 

Modal Popup CSS

The following CSS is used for styling the ASP.Net AJAX ModalPopupExtender.
<style type="text/css">
    body {font-family:Arial; font-size:10pt; }
    .modalBackground {background-color: Black; filter: alpha(opacity=90); opacity: 0.8; }
    .modalPopup {background-color: #fff; border: 3px solid #ccc; padding: 10px; width: 300px;}
</style>
 
 

Screenshot

Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control
 
 

Demo

View Demo
 
 

Downloads

Download Code