Introduction
This article explains how to create a Modal Popup in an ASP.NET application using Ajax.
In many sites you must have seen that when you click on a button a form is displayed but it is opened on the same page and you can see the background page as well, so it doesn't close any page yet runs on the same page on which you are working.
This is done using a Modal Popup, Ajax provides you this feature that can be used in the ASP.NET Application.
A Modal Popup looks something like this:
![model1.jpg]()
Let's see the procedure to create such an application.
Step 1
First of All you need to download the "AjaxControlToolkit.dll". It can be downloaded from the official Ajax site or you can download my application and can obtain it from the Bin folder of my application.
![model2.jpg]()
Now attach this Toolkit with your ASP.NET Application, this can be done by right-clicking on the reference and then choose to "Add Existing Item".
After attaching the Toolkit with the application you need to register this in your application; that can be done by writing this code:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Step 2
Now the next step is to add the Script Manager to your application so that you can use the Tools of Ajax.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Now we can call the ModalPopupExtender in our application as in the following:
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
In ModalPopupExtender we pass a few IDs like which ID will be used to open the Popup, which ID will be used to close the Popu, on which ID Popup is to be open.
Step 3
Here I had used Panel as a popup and two buttons for opening and closing the application.
Under the Panel you can create a form that is to be filled in by the End User.
Our complete code will be like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Background
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.Popup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 400px;
height: 350px;
}
.lbl
{
font-size:16px;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body >
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">
<table>
<tr>
<td>
<asp:Label runat="server" CssClass="lbl" Text="First Name"></asp:Label>
</td>
<td>
<asp:TextBox runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" CssClass="lbl" Text="Middle Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" CssClass="lbl" Text="Last Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" CssClass="lbl" Text="Gender"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" CssClass="lbl" Text="Age"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" CssClass="lbl" Text="City"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label6" runat="server" CssClass="lbl" Text="State"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server" Font-Size="14px" ></asp:TextBox>
</td>
</tr>
</table>
<br />
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
</form>
</body>
</html>
Output
On running the application you will see a simple button that is used to open the popup.
![model3.jpg]()
Now a popup window will be opened on which you can fill in the entries, you will see that the background page is also there but you can't work on that until you close this popup.
![model4.jpg]()