Ajax: Building Modal Popup using ASP.NET AJAX ModalPopupExtender Control

16.8k
0
1

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" />
<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>
</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>