Click here to Skip to main content
15,860,859 members
Articles / Web Development / ASP.NET
Article

ASP.Net User Controls as Static or Movable PopUps

Rate me:
Please Sign up or sign in to vote.
4.63/5 (21 votes)
2 Feb 2007CPOL2 min read 110.1K   2.8K   103   22
Use form controls as static informational popups or movable control windows.

Sample image Sample image


** Online Demo!! **

Introduction

This is a very simple example of how to make .ascx user controls into popup windows on a web app. Almost any user control can be modified to work as a popup, and there is very little code needed to create the effect. Most of the work is done in the javascript functions included in the source.

Pop Example Controls

The demo project uses two types of controls as popups. The first type is simply an informational window that can be used as a very effective help display. The text on these static popup examples is loaded from XML, so all modifications to the text can be done in one place, and can be very easily modified programmatically. The second type of example is a control developed to collapse items from a list into groups. The original item list is shown on the main page, and the Go button will display the collapse popup, which is movable.

Coding Necessary for Creating PopUps

There is very little coding necessary to make a control into a popup. The only change to the control is simply defining the control as hidden with absolute positioning. The click event for the collapse control should also not bubble, as it will be handled in the main page.

ASP.NET
<div class="collapsePop" id="CollapseContainer" 
     style="VISIBILITY: hidden; POSITION: absolute" 
     onclick="event.cancelBubble = true;" runat="server"></div> 

When the parent page of the popup control is loaded, the control must be created and hooked up to various events. The control is then added to the page in a defined area.

C#
cc = (CollapseControl)LoadControl("CollapseControl.ascx");
cc.ID = this.ID + "_cc_1";
cc.ColDoneClick += new EventHandler(cc_ColDoneClick);
Control PopArea = Page.FindControl("PopArea"); 
Control cc1 = PopArea.FindControl(cc.ClientID); 
if (cc1 != null) PopArea.Controls.Remove(cc1);
PopArea.Controls.Add(cc); 

With the control created and loaded on the page, only the button click event needs to be assigned to make this control a popup.

C#
btnPop01.Attributes.Add("onclick", "return !showPop('" + 
        cc.ClientID + "_CollapseContainer', '',event,false,-10,-30,true," +
        sbCtrlIDs+ ",false);"); 

The client-side javascript function showPop will take care of displaying and hiding the popup, and has various parameter settings to make the popup static or movable. These function parameters are defined as follows:

pID : The ID of the Popup Control.
selID : A Selection control ID that obscures the popup (Only necessary for IE 6 bug fix).
eventObj : The event that fires the function.
bTimer : TRUE if popup is hidden on mouseout, otherwise FALSE.
OffX : X Offset of popup display from event target.
OffY : Y Offset of popup display from event target.
bVAlign : TRUE if popup should be aligned vertically, otherwise FALSE.
ctrlIDs : Array of selection controls on page that may obscure the popup. (IE bug fix only).
bAnimate : TRUE if popup should be displayed with rollout, FALSE to display normal.

Final Notes

These examples are very basic controls to show how easy it is to create a popup effect on a webpage. As any control can effectively be used as a popup, there is no limit to the possibilities for creating different and efficient effects. Hopefully you will find these useful.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
Software architect and developer with over 20 years of experience, specializing in GUI designs and intranet systems in MFC/C++ and ASP.Net using C#.

Comments and Discussions

 
GeneralMy vote of 2 Pin
devendra.singhin21-Apr-11 7:16
devendra.singhin21-Apr-11 7:16 
GeneralBackground Color Pin
andreslarrimbe15-Feb-11 3:06
andreslarrimbe15-Feb-11 3:06 
QuestionHow do I open a popup inside a popup? Pin
Celefin6-Mar-09 3:11
Celefin6-Mar-09 3:11 
GeneralToubles with Scrollbar Pin
jasanguineti14-Dec-08 5:20
jasanguineti14-Dec-08 5:20 
GeneralgetObject is not defined Pin
OmidH19-Jun-07 18:19
OmidH19-Jun-07 18:19 
GeneralRe: getObject is not defined Pin
Bob Carboni20-Jun-07 3:18
Bob Carboni20-Jun-07 3:18 
GeneralNice - I like it Pin
stixoffire27-Mar-07 16:38
stixoffire27-Mar-07 16:38 
GeneralRe: Nice - I like it Pin
Bob Carboni28-Mar-07 14:59
Bob Carboni28-Mar-07 14:59 
GeneralAccessibility Pin
smartinz6-Feb-07 12:07
smartinz6-Feb-07 12:07 
GeneralRe: Accessibility Pin
Bob Carboni7-Feb-07 12:06
Bob Carboni7-Feb-07 12:06 
GeneralRe: Accessibility Pin
smartinz8-Feb-07 8:47
smartinz8-Feb-07 8:47 
QuestionPopup Form Pin
Michael P. Moore6-Feb-07 5:41
Michael P. Moore6-Feb-07 5:41 
AnswerRe: Popup Form Pin
Bob Carboni6-Feb-07 6:02
Bob Carboni6-Feb-07 6:02 
GeneralRe: Popup Form Pin
Michael P. Moore6-Feb-07 6:19
Michael P. Moore6-Feb-07 6:19 
GeneralNice article Pin
Clickok3-Feb-07 11:50
Clickok3-Feb-07 11:50 
GeneralRe: Nice article Pin
Bob Carboni3-Feb-07 13:30
Bob Carboni3-Feb-07 13:30 
Generalcovered by list box in ie6 Pin
aruan2-Feb-07 16:51
aruan2-Feb-07 16:51 
GeneralRe: covered by list box in ie6 Pin
Ghazi H. Wadi3-Feb-07 2:40
Ghazi H. Wadi3-Feb-07 2:40 
GeneralRe: covered by list box in ie6 Pin
Bob Carboni3-Feb-07 5:24
Bob Carboni3-Feb-07 5:24 
GeneralRe: covered by list box in ie6 Pin
Bob Carboni3-Feb-07 5:28
Bob Carboni3-Feb-07 5:28 
GeneralRe: covered by list box in ie6 Pin
stixoffire28-Mar-07 7:22
stixoffire28-Mar-07 7:22 
GeneralRe: covered by list box in ie6 Pin
Bob Carboni28-Mar-07 15:02
Bob Carboni28-Mar-07 15:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.