Introduction:
In this article you will see how easy it is to use a simple DIV layer as a popup window that contained an ASP.NET Server control (List box). You will also see how on a mouse click inside a Textbox, you can able to popup a window which is nothing except a DIV Layer with some CSS formatting.
For Example: Through this example you can learn how the popup controls create?
Html code for popup control:
<%@ Page language="VB" Inherits="PopupWithDiv.ParentPage" CodeFile="ParentPage.aspx.vb" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Parent Page</title>
<LINK href="main.css" type="text/css" rel="stylesheet">
<script src="jsPopup.js" type="text/javascript"></script>
<script language="javascript">
<!--
// Prevent users from typing any text
// into the Textbox
function ProtectBox(e)
{
return false;
}
-->
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<!-- Header Section -->
div id="header">
<p><font color= "#ff9933" size=6>Popup Window with DIV Layer</font></p>
</div>
<!-- Body Section -->
<div id="content">
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td><label for="txtCountry" style="font-size: larger; text-transform: capitalize; color: purple">Country :</label></td>
<td><asp:TextBox id="txtCountry" runat="server" OnKeyDown="return ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')" BackColor="#FFC0FF" BorderColor="Fuchsia">Click here</asp:TextBox></td>
<td width="50"></td>
<td><label for="txtCity"style="font-size: larger; text-transform: capitalize; color: purple">City :</label></td>
<td><asp:TextBox id="txtCity" runat="server" OnKeyDown="return ProtectBox(event);" OnClick="PopupArea(event, 'divCity')" BackColor="#FFC0FF" BorderColor="Fuchsia">Click here</asp:TextBox></td>
</tr>
</table>
</div>
<%-- Country --%>
<div class="popupWindow" id="divCountry">
<table cellSpacing="0" cellPadding="0" width="250px" bgColor="#2557ad" border="0">
<tr>
<td align="right"><span style="CURSOR: hand" onclick="jsAreaClose('divCountry')"><img alt="Hide Popup" src="close.gif" border="0"></span></td>
</tr>
<tr>
<td>
<asp:ListBox id="lstCountry" runat="server" AutoPostBack="True" width="100%" rows="10" BackColor="rosybrown" ForeColor="gold" ></asp:ListBox></td>
</tr>
</table>
</div>
<%-- City --%>
<div class="popupWindow" id="divCity">
<table cellSpacing="0" cellPadding="0" bgColor="#2557ad" width="250px" border="0">
<tr>
<td align="right"><span style="CURSOR: hand" onclick="jsAreaClose('divCity')"><img alt="Hide Popup" src="close.gif" border="0"></span></td>
</tr>
<tr>
<td>
<asp:ListBox id="lstCity" runat="server" AutoPostBack="True" width="100%" rows="10" BackColor="RosyBrown" ForeColor="Gold"></asp:ListBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</HTML>
Code behind code:
Imports System Imports System.Collections
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Namespace PopupWithDiv
' <summary>
' Summary description for ParentPage.
' </summary>
Partial Public Class ParentPage
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
' Load data into Country List box
If Not Page.IsPostBack Then
' Load data from XML into a DataSet
Dim ds As DataSet = New DataSet()
ds.ReadXml(Server.MapPath("countries.xml"))
Me.lstCounTry.DataSource = ds.Tables(0).DefaultView
Me.lstCounTry.DataTextField = "name"
Me.lstCounTry.DataBind()
End If
End Sub
#region Web Form Designer generated code
Protected Overrides Sub OnInit(ByVal e As EventArgs)
' CODEGEN: This call is required by the ASP.NET Web Form Designer.
InitializeComponent()
MyBase.OnInit(e)
End Sub
' <summary>
' Required method for Designer support - do not modify
' the contents of this method with the code editor.
' </summary>
Private Sub InitializeComponent()
Me.lstCounTry.SelectedIndexChanged += New EventHandler(lstCounTry_SelectedIndexChanged)
Me.lstCity.SelectedIndexChanged += New EventHandler(lstCity_SelectedIndexChanged)
End Sub
#End Region
#region ListBox Event Handler
Private Sub lstCounTry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
' Set the value in the textbox
Me.txtCounTry.Text = Me.lstCounTry.SelectedValue
' Load and Filter the lstCity
Dim ds As DataSet = New DataSet()
ds.ReadXml(Server.MapPath("cities.xml"))
Dim dv As DataView = ds.Tables(0).DefaultView
dv.RowFilter = "country = '" + Me.lstCounTry.SelectedValue + "'"
/ Bind lstCity
Me.lstCity.DataSource = dv
Me.lstCity.DataTextField = "name"
Me.lstCity.DataBind()
End Sub
Private Sub lstCity_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
' Set the value in the textbox
Me.txtCity.Text = Me.lstCity.SelectedValue
End Sub
#End Region
End Class
End Namespace
Output: When you debug your application and click on the first textbox then you get the following output. It means the popup control opens.
Figure 1: You are seeing the popup window in this figure.
This window will close automatically after some time or you can close it yourself.
When you select any country then you can select any city of that country from other popup window. If you will not select ant city then other popup window will open but you can not see the city in this example.
After select ant country you will see the following output.
Figure 2: second popup window is open.