How to Popup a Window Using DIV Layer in ASP.NET 1.x/2.x
page 2 of 5
by Bilal Haidar
Feedback
Average Rating: 
Views (Total / Last 10 Days): 53435/ 57

The HTML WebForm

We will build a very simple WebForm that includes two Textboxes.  For each Textbox we will attach the OnClick client event to fire a JavaScript method that will do the job of popping up the Div Layer or the magical Popup window.

Listing 1

<%@ Page language="c#"
 Codebehind="ParentPage.aspx.cs" AutoEventWireup="false"
 Inherits="PopupWithDiv.ParentPage" %>
<!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>Popup Window with DIV Layer</p>
                  </div>
                  <!-- Body Section -->
                  <div id="content">
                        <table border="0" cellpadding="0" cellspacing="0">
                              <tr valign="top">
                                    <td><label for="txtCountry">Country :</label></td>
                                    <td><asp:TextBox
 id="txtCountry" runat="server" OnKeyDown="return
 ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')"></asp:TextBox></td>
                                    <td width="50"></td>
                                    <td><label for="txtCity">City :</label></td>
                                    <td><asp:TextBox
 id="txtCity" runat="server" OnKeyDown="return
 ProtectBox(event);" OnClick="PopupArea(event, 'divCity')"></asp:TextBox></td>
                              </tr>
                        </table>
                  </div>
                  <%-- Country --%>
                  <div class="popupWindow" id="divCountry">
                        <table cellSpacing="0" cellPadding="0" width="100%"
 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"></asp:ListBox></td>
                              </tr>
                        </table>
                  </div>
                  <%-- City --%>
                  <div class="popupWindow" id="divCity">
                        <table
 cellSpacing="0" cellPadding="0" width="100%"
 bgColor="#2557ad" 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="lsCity" runat="server" AutoPostBack="True"
 width="100%" rows="10"></asp:ListBox></td>
                              </tr>
                        </table>
                  </div>                  
            </form>
      </body>
</HTML>

The areas in bold are the ones important for this Popup window to properly function.  On the mouse click, a JavaScript function is being called: PopupArea.

That function is being defined in an accompanying JavaScript file.  We will not go into its details, but this function is the one responsible for showing the pop up window, i.e. to show the DIV layer.

As you can see, we have added two DIV layers at the end of the page above, one for countries and one for cities.  Each one holds an ASP.NET ListBox from which the user will select.

Figure 1 shows the page in action when viewed in a browser.  It shows how the DIV Layers are being pop up.

Figure 1

 

When a click is done inside a Textbox, the window is shown on the client-side without any post back.

Now, it is time to populate the List boxes with some data to simulate a real situation.


View Entire Article

User Comments

Title: zxc   
Name: xzcxzcxz
Date: 2012-12-24 7:17:39 AM
Comment:
czxczx
Title: DFF   
Name: DFDS
Date: 2012-11-23 3:50:39 AM
Comment:
DFFS
Title: mmm   
Name: mm
Date: 2012-09-14 10:30:13 AM
Comment:
mmm
Title: Website maken met Negeso CMS   
Name: Website maken
Date: 2012-09-10 2:09:32 PM
Comment:
Website maken met http://www.negeso.nl/ klik hier
Title: Website maken met Negeso CMS   
Name: website maken
Date: 2012-09-10 2:07:42 PM
Comment:
Website maken met http://www.negeso.com/, klik hier
Title: thsh   
Name: sthsth
Date: 2012-09-10 9:50:40 AM
Comment:
sthstrh
Title: g   
Name: fy
Date: 2012-08-29 1:04:44 AM
Comment:
jyuhg
Title: gyghjghj   
Name: ghjghjghj
Date: 2012-08-16 11:36:07 AM
Comment:
ghjghjghj
Title: add/Delete data using popup window   
Name: nisha
Date: 2012-05-03 7:29:08 AM
Comment:
Add/Delete data through listbox into database by using popup window in asp.net any one help me
Title: Code   
Name: mkk
Date: 2010-02-17 5:42:09 AM
Comment:
where is Code part
Title: Popup window with div layer   
Name: Thiru
Date: 2010-01-08 11:14:13 AM
Comment:
trying it
Title: Popup Window with Div layer   
Name: Suresh Kushwaha
Date: 2009-12-26 6:06:30 AM
Comment:
I want to use codebehind inside the literal control. Please help me.
Title: div popup   
Name: andy
Date: 2009-08-21 6:44:49 AM
Comment:
Awesome article! very clean code and exactly what I need.
Title: Very Nice   
Name: venkat
Date: 2009-06-12 9:58:44 AM
Comment:
Looks very nice
Title: ti2000   
Name: Readgo
Date: 2008-09-01 8:50:43 PM
Comment:
just want an answer
Title: Div popUp   
Name: amit
Date: 2008-08-02 4:15:43 AM
Comment:
Please also tell about the javascript code and css for open the div popup window.
Title: css layer   
Name: div lesson
Date: 2008-07-15 10:05:23 AM
Comment:
css layer examples / properties and layer attributes
http://css-lessons.ucoz.com/css-layer-properties.htm
Title: javascript   
Name: good one
Date: 2008-02-17 2:22:24 PM
Comment:
good
Title: No javascript explanation?   
Name: outdoor vinyl shutters
Date: 2008-01-30 4:09:48 PM
Comment:
Nice work, but why didn't you go into details as to how the javascript popup works as that is what I am most interested in?
Title: Thanx a lot   
Name: Vijai Anand
Date: 2007-12-26 7:08:18 AM
Comment:
Thanks a lot mate... your article really helped me
Title: Hi   
Name: Ajay
Date: 2007-10-09 7:13:25 AM
Comment:
Nice One
Title: how to return the value to the textbox in gridview?   
Name: string.yin
Date: 2007-09-19 5:54:18 AM
Comment:
when the textbox is in the gridview (when edit),how to make the return value to the textbox in the gridview?
thanks!
my email:string.yin@gmail.com
Title: Re: nice but what about div on top of dropdownlist   
Name: Phil
Date: 2007-08-09 12:45:39 AM
Comment:
in IE6 dropdownlist is one of the "windowed" controls, but not in IE7. I had the same issue a couple of years back with tooltip style help, and I ended up with generalized code that would examine the SELECT elements to see if any were overlapping the DIV and hide them, then redisplay after the tooltip disappears
Title: This was helpful.   
Name: Kyle
Date: 2007-08-03 6:27:50 AM
Comment:
Just adding myself to the already long list of commenters.
This example was helpful, thankyou.
Title: Re: Bouchra   
Name: Bilal Haidar [MVP]
Date: 2007-07-27 12:56:30 PM
Comment:
Most welcome Bouchra :)!

Are you a Lebanese Developer?

Regards
Title: Keep on   
Name: Bouchra
Date: 2007-07-27 10:32:17 AM
Comment:
Thank you so so soo much,It was a real Great help

Bouchra
Title: Thank lot   
Name: arun
Date: 2007-07-19 5:06:29 AM
Comment:
thank you for providing such good code
Title: Thanks For your sample code   
Name: Shina Xin
Date: 2007-07-06 9:36:04 AM
Comment:
hanks For your sample code, give lot of helps
Title: Thanks for your Hard Work   
Name: Murthy
Date: 2007-06-15 3:56:21 AM
Comment:
Let me thank you for providing such good code. I got exactly what i expected, thanks once again
Title: Need to retrieve values of list from popup and add into parent list box without postback   
Name: vikas
Date: 2007-04-17 2:07:07 PM
Comment:
HI,



I have a problem in ASP.net.

i have 2 window one parent that contains a list box. and one add button.

on click of add button i am opening a popup.

the popup window contans

2 list box

1st Available Fields

2nd Selected fields.

and 2 buttons ADD and Remove

Click on Add button will add item from list one to list 2

Click on Remove button Remove item from list 2 to list 1



i want to pass complete list of selected items to parent window listBox.



How it can be done,i will welcome any help or comment.



list of selected items i am able to pass to parent but only string i can paas.i want to populate the list box of parent window without any post back of parent window.



Reply me ASAP.

Vikas
Title: Nice   
Name: halsa
Date: 2007-03-28 9:29:36 AM
Comment:
Hi,

Its a nice article to this control will there is a way to select the textbox value highlighted in popup listbox.

Thanks
halsa
Title: popup   
Name: rekha
Date: 2007-03-23 3:27:43 AM
Comment:
i wanted to know if i could add a grid view with single/multi select options for selecting huge data
Title: useful example   
Name: spitraberg
Date: 2007-03-14 10:54:06 AM
Comment:
thanx for this sample for using layers.
Title: about the display   
Name: universeliu
Date: 2007-02-22 6:09:04 AM
Comment:
hello. I have a problem,that is when I select a item from the div,the page feedback and the div would be not displayed,I want the div keep appear where the page feeback ,how can i do it ,thank you .
Please response me to universeliu@163.com.
Title: Informative   
Name: Roxanne
Date: 2007-02-17 1:45:57 AM
Comment:
it is very informative. i hope i could learn more about it.
Title: nice   
Name: jaysingh
Date: 2007-02-14 6:31:06 AM
Comment:
interesting stff
Title: Good Article   
Name: Soshan
Date: 2007-02-01 8:07:26 AM
Comment:
Good Article.. Helped me alot
Title: Programmer   
Name: faith
Date: 2007-01-11 7:55:59 PM
Comment:
great! found what i needed
Title: Re: Sudhir   
Name: Bilal Haidar [MVP]
Date: 2007-01-06 6:22:07 AM
Comment:
Hello Sudhir:
What you can do is create a WebControl where you RENDER the DIV popup window, you might expose the DataSource of the ListBox to bind it everytime to your own data.
Then you place an instance of this window on your page and let it work!

Is it helpful?
Regards
Title: Good work   
Name: Sudhir
Date: 2006-12-21 2:16:52 PM
Comment:
Bilal its a good article... but i wanted some changes in this code. Instead of writing the html code each time for the ListBox, there shud be a way to generalise this List Box so that in the same list box i can pass the dataset and the div so that throughout the website , i need to maintain only one listbox. Is this possible??
Title: Very Nice   
Name: genson
Date: 2006-12-18 5:12:56 AM
Comment:
Very Nice
Title: nice but what about div on top of dropdownlist   
Name: Nataraj
Date: 2006-12-07 12:10:30 AM
Comment:
what about div on top of dropdownlist,
anyone can mailme @ meetnati@yahoo.co.in
Title: js file can be found in download sample   
Name: Huang
Date: 2006-12-02 11:09:39 PM
Comment:
js file can be found in download sample in this page.
Title: Mr.   
Name: Mukesh
Date: 2006-11-28 11:40:49 AM
Comment:
Hi

Very nice and good thinking

Thanks
Title: where is the JS file   
Name: where is the JS file
Date: 2006-11-27 4:22:25 AM
Comment:
there is no sign of the JS file which has every thing
where is it
Title: Good Work   
Name: Rahul
Date: 2006-11-26 1:09:03 AM
Comment:
This is a greate artical, i was searching something else but after reading this artical i got very good idea.

thanks
Title: Keep up your good work!   
Name: Ian Rey Palo
Date: 2006-11-22 3:09:05 AM
Comment:
Wonderful! I've been needing that for a long time.
But I hope the jsPopup.js would also be explained....Keep up!
Title: Re:   
Name: Bilal Haidar [MVP]
Date: 2006-11-19 2:19:19 PM
Comment:
Thank you ladies and gentlemen for your kind words!
This is a huge support to me!!

Regards
Title: Great Tool   
Name: Shina Xin
Date: 2006-11-19 9:19:42 AM
Comment:
Excellent work, it help me a lot.
Title: Great Tip   
Name: Asif Muhammad
Date: 2006-11-17 11:47:28 AM
Comment:
Wow, Great Tip to use in asp.net forms. Thanks
Title: Good Job   
Name: Irfan
Date: 2006-11-17 8:09:20 AM
Comment:
Excellent work done !!
Title: Programmer Analyst   
Name: Gee
Date: 2006-11-16 11:32:11 AM
Comment:
This code was really useful. Thanks and lot and keep up the good work.
Title: Great Article   
Name: Haissam Abdul Malak
Date: 2006-11-15 1:50:43 PM
Comment:
Let me thank you for the above provided information. Keep up the good work..

Best Regards
Title: JS needs further clarification   
Name: BigJim
Date: 2006-11-09 9:35:24 PM
Comment:
Booo! The interesting stuff is going on in jsPopup.js, and not a word about the code it contains?
Title: Very Nice   
Name: AzamSharp
Date: 2006-11-08 1:51:11 AM
Comment:
Very nice! :)

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 10:57:52 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search