AJAX ModalPopupExtender in ASP.NET
We can easily create modal pop up in Asp.Net by using AJAX ModalPopupExtender control. To create modal pop up, first add the AjaxControlToolkit.dll reference to your web site and place below code in web.config file.
<pages>
<controls>
...........
<addtagPrefix="ajax"assembly="AjaxControlToolkit"namespace="AjaxControlToolkit"/>
</controls>
</pages>
Add ModalPopupExtender control for .aspx page and provide the target control id, for which event we have to open this modal pop up. Generally we will use asp.net button control. Provide the value PopupControlID, which is the ID of pop up as shown below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Modal Popup Extender Example</title>
<style type="text/css"">
.modalBackgroundClass {
background-color:White;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>
<divid="divPopUP" align="center" style="display:none;width:400px;height:400px;border:solid1px#000;">
This is the example for Asp.Net AJAX Modal POP UP<br/>
<asp:Button ID="btnHide" runat="server" Text="Click to hide POP UP" OnClick="btnHide_Click"/><br/>
</div>
<ajax:ModalPopupExtender ID="mpe1" runat="server" TargetControlID="btn" PopupControlID="divPopUP"
BackgroundCssClass="modalBackgroundClass" DropShadow="false"/>
<asp:Button ID="btn" runat="server" Text="Click for POP UP"/><br/>
</div>
</form>
</body>
</html>
As shown above, we provide the TargetControlID as btn and PopupControlID as divPopUP. Whenever you click the button btn, pop up divPopUP will displays. Even you can hide the pop up from code behind as shown below.
protectedvoid btnHide_Click(object sender, EventArgs e)
{
mpe1.Hide();
}
As shown above, we can hide the pop up by calling the ModalPopupExtender control Hide()method. If you want to show the pop up from code behind use Show() method of ModalPopupExtender control.
