How to Popup a Window Using DIV Layer in ASP.NET 1.x/2.x
page 1 of 5
Published: 08 Nov 2006
Abstract
In this article Bilal Haidar shows you how to create your own customized DIV layer and use it as a Popup window that can include many controls ranging from simple HTML tags to ASP.NET Server controls, without using either the famous Open function nor the showModalDialog or showModelessDialog.
by Bilal Haidar
Feedback
Average Rating: 
Views (Total / Last 10 Days): 59371/ 948

Introduction

In a project I am currently working on (ASP.NET 1.1), one of the Web Forms included has a set of three controls that represent a certain feature in the system.  Suppose those controls are simple DropDownLists.  When a value is being selected in the first DropDownList, the data present in the second DropDownList should be filtered by the first value selected.  The same idea applies on the third DropDownList.

This form is going to be used by end users who know nothing about ASP.NET or about development in general.  All they want is a fancy web form that makes their life easy.

A decision has to be made as to what to use in place of those three controls.  Do we use DropDownLists or do we use Textboxes with some sort of popup window to fill the data in the Textbox?  Well, we came up with a very nice and fancy solution; use a Textbox and hook up the OnClick client side event to a JavaScript method pops up a Div layer, including a ListBox to select a value from.

A solution without using any normal popup windows or using the old fashioned DropDownLists to filter selection!


View Entire Article

Article Feedback

Title:  
Name:  
Url: ( Optional )
Comment:  
Please add 2 and 5 and type the answer here:

User Comments

Title: asdf   
Name: asdf
Date: 7/3/2008 3:41:32 PM
Comment:
asdf
Title: javascript   
Name: good one
Date: 2/17/2008 2:22:24 PM
Comment:
good
Title: No javascript explanation?   
Name: outdoor vinyl shutters
Date: 1/30/2008 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: 12/26/2007 7:08:18 AM
Comment:
Thanks a lot mate... your article really helped me
Title: Hi   
Name: Ajay
Date: 10/9/2007 7:13:25 AM
Comment:
Nice One
Title: how to return the value to the textbox in gridview?   
Name: string.yin
Date: 9/19/2007 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: 8/9/2007 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: 8/3/2007 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: 7/27/2007 12:56:30 PM
Comment:
Most welcome Bouchra :)!

Are you a Lebanese Developer?

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

Bouchra
Title: Thank lot   
Name: arun
Date: 7/19/2007 5:06:29 AM
Comment:
thank you for providing such good code
Title: Thanks For your sample code   
Name: Shina Xin
Date: 7/6/2007 9:36:04 AM
Comment:
hanks For your sample code, give lot of helps
Title: Thanks for your Hard Work   
Name: Murthy
Date: 6/15/2007 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: 4/17/2007 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: 3/28/2007 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: 3/23/2007 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: 3/14/2007 10:54:06 AM
Comment:
thanx for this sample for using layers.
Title: about the display   
Name: universeliu
Date: 2/22/2007 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: 2/17/2007 1:45:57 AM
Comment:
it is very informative. i hope i could learn more about it.
Title: nice   
Name: jaysingh
Date: 2/14/2007 6:31:06 AM
Comment:
interesting stff
Title: Good Article   
Name: Soshan
Date: 2/1/2007 8:07:26 AM
Comment:
Good Article.. Helped me alot
Title: Programmer   
Name: faith
Date: 1/11/2007 7:55:59 PM
Comment:
great! found what i needed
Title: Re: Sudhir   
Name: Bilal Haidar [MVP]
Date: 1/6/2007 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: 12/21/2006 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: 12/18/2006 5:12:56 AM
Comment:
Very Nice
Title: nice but what about div on top of dropdownlist   
Name: Nataraj
Date: 12/7/2006 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: 12/2/2006 11:09:39 PM
Comment:
js file can be found in download sample in this page.
Title: Mr.   
Name: Mukesh
Date: 11/28/2006 11:40:49 AM
Comment:
Hi

Very nice and good thinking

Thanks
Title: very very nice tip   
Name: ddr888
Date: 11/27/2006 9:22:36 PM
Comment:
i like it!
Title: where is the JS file   
Name: where is the JS file
Date: 11/27/2006 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: 11/26/2006 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: 11/22/2006 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: 11/19/2006 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: 11/19/2006 9:19:42 AM
Comment:
Excellent work, it help me a lot.
Title: Great Tip   
Name: Asif Muhammad
Date: 11/17/2006 11:47:28 AM
Comment:
Wow, Great Tip to use in asp.net forms. Thanks
Title: Good Job   
Name: Irfan
Date: 11/17/2006 8:09:20 AM
Comment:
Excellent work done !!
Title: Programmer Analyst   
Name: Gee
Date: 11/16/2006 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: 11/15/2006 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: 11/9/2006 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: 11/8/2006 1:51:11 AM
Comment:
Very nice! :)

Product Spotlight
Product Spotlight 
Learn More
.NET Tools
asp.net shopping cart
asp.net chart control






Ads Powered by Lake Quincy Media
Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2008 ASPAlliance.com  |  Page Processed at 7/5/2008 1:33:47 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search