In this article I will explain with an example how to build a Modal Popup ASP.Net AJAX ModalPopupExtender control.
Register the AJAX Control Toolkit
You will need to register the AJAX Control Toolkit Library by putting the following line just below the @PageDirective.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Configuring the ASP.Net AJAX ModalPopupExtender
<form id="form1" runat="server">
<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 AJAX ModalPopupExtender Example<br />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
</form>
Above you will notice a ScriptManager control, a Button btnShow which will be used to open the ASP.Net AJAX ModalPopupExtender Modal Popup. A Panel Panel1 which will be used to display the Modal Popup. The panel has a Button btnClose which is used to close the Modal Popup.
Finally we have the ModalPopupExtendermp1 for which we have set the PopupControlID to Panel1, TargetControlID to btnShow and the CancelControlID to btnClose.
CSS Styles
You will need to include the following CSS classes.
<style type="text/css">
.modalBackground
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.modalPopup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 300px;
height: 140px;
}
</style>
Demo
Downloads
