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

ASP.NET Popup Control

Rate me:
Please Sign up or sign in to vote.
4.87/5 (617 votes)
21 Apr 2004Ms-PL5 min read 3.2M   98.5K   1.2K   648
Highly customizable JavaScript popup control for web page wrapped in ASP.NET custom control.

Popup control in Internet Explorer and Mozilla

Introduction

Customizable colors

This article describes an ASP.NET popup control. This control imitates MSN Messenger alert, but it is designed for use in a web page. Graphical appearance of this control can be completely changed by using one of predefined styles or by modifying all colors used on the control. Control supports Drag&Drop, so user can move control on the page, where he wants.

A very important feature of this control is, that it can be used on most of the current browsers. It is tested with latest version of Mozilla, Internet Explorer and Opera. The look of the control is different on browsers that doesn't support filters (filters are supported only in newer versions of MSIE). You can also use HTML in lot of control properties, so you can get popup with icon or anything you want.

Actions

The control has two events, LinkClicked (link in popup was clicked) and PopupClosed (user clicked on 'X' button in popup). There are three ways how this events can be handled. The method that will be used is determined by ActionType property. There can be the following three types of actions:

Actions - Open window

  • MessageWindow (default) - If this action is selected, control will open new browser window with text specified by Text property.
  • OpenLink - In this case, control allows you to do any JavaScript operation or open link to any other page (Link property). You can also change target attribute of generated <A> tag. Generated code will look like this: <a href="[Link]" target="[LinkTarget]">Link..</a>, so be careful when using quotes in Link. (Target attribute is added only when LinkTarget isn't empty string.)
  • RaiseEvents - When you select this option, popup control will raise LinkClicked or PopupClosed events on server-side.

Using this control

Adding the control to a web page is very simple. In VS.NET, you can just use Add/Remove Toolbox Items and select control's DLL file. Control will appear in toolbox and you can add it to a page.

Designer

Control has rich support for designer, so you can change every property of control at design-time. In category 'Action', you can define what the control should do when user clicks on link or closes popup element. Properties in categories 'Texts' and 'Design' allow you to modify control look and displayed messages. In 'Behavior', you can change timing (when popup will be displayed and hidden). AutoShow property indicates whether control will be displayed after page is loaded. This is useful when you want to show control later using Anchor control. If you set DragDrop to true, user can change control's position and move it on the page. 'Window' category allows you to change properties of window that will appear if you set ActionType to MessageWindow. Last properties are added to category 'Layout' and it makes possible to modify position, where window will be displayed (offsets from bottom-left or bottom-right window corner).

Code

Following code describes how to change a few properties and show popup control from code:

HTML
<!-- Popup.aspx -->
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"
  Assembly="EeekSoft.Web.PopupWin" %>

<cc1:popupwin id="popupWin" runat="server" visible="False" 
  colorstyle="Blue" width="230px" height="100px" dockmode="BottomLeft" 
  windowscroll="False" windowsize="300, 200"></cc1:popupwin>
// Popup.aspx.cs
// Change action type
popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow;

// Set popup and window texts
popupWin.Title="This is popup";
popupWin.Message="<i>Message</i> displayed in popup";
popupWin.Text="Text to show in new window..";

// Change color style
popupWin.ColorStyle=EeekSoft.Web.PopupColorStyle.Green;

// Change timing
popupWin.HideAfter=5000;
popupWin.ShowAfter=500;

// Show popup (after page is loaded)
popupWin.Visible=true;

Using anchor control

Designer

Page Designer

Edit properties

Adding anchor control to page at design-time is similar as adding popup control. When you add anchor to page, you can select ID of existing server-side control, or write ID of any other element, and choose its client-side event you want to handle. If you want to only reopen popup, you don't need to do anything else. You only have to ensure that popup window control will be rendered to output page (it must be visible). If you don't want to open popup when page is loaded, set AutoShow to false and popup will open after specified event occurs.

You can also change texts on popup control using PopupWinAnchor. To do this, set property ChangeTexts of anchor control to true. If this is selected, anchor control will change title of popup to NewTitle, message to NewMessage and text in optional new browser window to NewText, when client-side event is raised.

Code

Following example shows how PopupWinAnchor control can be used to reopen once closed popup control:

HTML
<!-- Anchor.aspx -->
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"
  Assembly="EeekSoft.Web.PopupWin" %>

<cc1:popupwin id="popupWin" runat="server" visible="False" 
  colorstyle="Blue" width="230px" height="100px" dockmode="BottomLeft" 
  windowscroll="False" windowsize="300, 200"></cc1:popupwin>
  
<cc1:popupwinanchor id="popupAnchor" runat="server"
  changetexts="False"></cc1:popupwinanchor>
 
<span id="spanReopen"> Click here to reopen popup ! </span>
// Anchor.aspx.cs
// Handle onclick event ..
popupAnchor.HandledEvent="onclick";
// .. of spanReopen element
popupAnchor.LinkedControl="spanReopen";
// Show popupWin when event occurs
popupAnchor.PopupToShow="popupWin";

// Popup win is visible ..
popupWin.Visible=true;
// .. and will be displayed when page is loaded
popupWin.AutoShow=true;

Creating control at runtime

There were problems with creating controls at runtime. This is fixed in latest version and here is an example of how to create PopupWindow with PopupWinAnchor control at runtime. Following code will create one popup window that will be displayed (using JavaScript) after user clicks on spanReopen element. (This sample assumes, that you have an element called spanReopen on your page).

C#
// Create popup window and popup win anchor control (in Page_Load)
PopupWin popupWin=new PopupWin();
PopupWinAnchor popupAnchor=new PopupWinAnchor();

// Add controls to page
placeHolder.Controls.Add(popupAnchor);   
placeHolder.Controls.Add(popupWin);

// Set anchor properties
popupAnchor.PopupToShow=popupWin.ClientID;
popupAnchor.LinkedControl="spanReopen";
popupAnchor.HandledEvent="onclick";

// Set popup win properties
popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow;
popupWin.Title="This is popup";
popupWin.Message="Message displayed in popup";

// Show popup
popupWin.Visible=true;
popupWin.AutoShow=false;

Who can use it ?

This control can be well used to notify users about important information. For example, in a web email client, you may want to notify the user about new message. In applications where users can communicate inside system, you can use this control to alert user, that someone wants to talk to him. Benefit of this control is, that it doesn't need any fixed space on web page and it is remarkable, so user will notice it. Another way of how to use it is to show advertising information in it instead of using big Flash animations (See online demo for CodeProject banner).

Anchor control makes it possible to use popup control faster and with less page reloading. For example, you can use popup control to show quick help on form fields like in this sample. Quick help is displayed when textbox receives focus. Another way of how to use it for quick help is to add button behind each textbox and when user clicks on this button, popup will be displayed.

History

  • 20/04/2004 - PopupSpeed added (you can change sliding speed of popup window).
  • 20/04/2004 - Few minor bugs fixed. Sample that shows how to generate controls at runtime added.
  • 26/02/2004 - ShowLink property added (allows not to generate link in popup control).
  • 11/30/2003 - DLL compiled both .NET 1.0 and .NET 1.1, OpenLink error fixed, Drag & drop support, VB.NET sample added (1.2).
  • 11/18/2003 - PopupWinAnchor added (1.1). Thanks to Oskar Austegard for his suggestion.
  • 11/15/2003 - First version (1.0)

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Czech Republic Czech Republic
I live in Prague, the capital city of Czech republic (most of the time Smile | :) ). I've been very interested in functional programming recently and I have a passion for the new Microsoft F# language. I'm writing a book about Functional Programming in the Real World that shows the ideas using examples in C# 3.0 and F#.

I've been Microsoft MVP (for C#) since 2004 and I'm one of the most active members of the F# community. I'm a computer science student at Charles University of Prague. My hobbies include photography, fractals and of course many things related to computers (except fixing them). My favorite book writers are Terry Pratchett and Philip K Dick and I like paintings by M. C. Escher.

PS: My favorite codeproject icon is Sheep | [baah] .

Comments and Discussions

 
QuestionShow Expired Pin
Member 1057937924-Feb-16 14:06
Member 1057937924-Feb-16 14:06 
Questioncustom error message in a popup window using a div Pin
Member 108958922-Jul-14 19:40
Member 108958922-Jul-14 19:40 
QuestionThanks Pin
mparvez10-Oct-13 9:27
mparvez10-Oct-13 9:27 
Questioni wanna use it withe javascript file Pin
mohammad wajeh4-Nov-12 22:11
mohammad wajeh4-Nov-12 22:11 
GeneralMy vote of 5 Pin
D-Kishore4-Sep-12 19:00
D-Kishore4-Sep-12 19:00 
GeneralMy vote of 5 Pin
Md. Marufuzzaman11-May-12 4:28
professionalMd. Marufuzzaman11-May-12 4:28 
GeneralMy vote of 5 Pin
Monjurul Habib9-Nov-11 12:25
professionalMonjurul Habib9-Nov-11 12:25 
nice one
GeneralRe: My vote of 5 Pin
Member 131043893-Apr-17 21:35
Member 131043893-Apr-17 21:35 
Questiondsfs Pin
Member 78204017-Nov-11 23:15
Member 78204017-Nov-11 23:15 
GeneralMy vote of 5 Pin
Pravin Patil, Mumbai24-Aug-11 0:56
Pravin Patil, Mumbai24-Aug-11 0:56 
QuestionDoes not work in ie6 Pin
cybfly20-Aug-11 22:57
cybfly20-Aug-11 22:57 
GeneralVery nice, thanks. Pin
Watcharakorn Wanich6-Jul-11 6:35
Watcharakorn Wanich6-Jul-11 6:35 
GeneralIts very nice Pin
derinpdavis19-Jun-11 20:08
professionalderinpdavis19-Jun-11 20:08 
Generalpopup control code Pin
gauriv2-Jan-11 2:00
gauriv2-Jan-11 2:00 
GeneralMy vote of 5 Pin
Sunasara Imdadhusen30-Dec-10 20:17
professionalSunasara Imdadhusen30-Dec-10 20:17 
QuestionHow to add controls ? Pin
valeranavin15-Sep-10 3:38
valeranavin15-Sep-10 3:38 
GeneralRe automatic redirection to Login.aspx Pin
Ajay Kale New9-Sep-10 2:41
Ajay Kale New9-Sep-10 2:41 
GeneralVery nice :) Pin
Anthony Daly31-Aug-10 4:18
Anthony Daly31-Aug-10 4:18 
GeneralMy vote of 1 Pin
Arpit kothari25-Aug-10 21:23
Arpit kothari25-Aug-10 21:23 
GeneralMy vote of 1 Pin
Shadabmca12-Mar-10 0:53
professionalShadabmca12-Mar-10 0:53 
GeneralRe: My vote of 1 Pin
Zamshed Farhan23-Jan-13 20:58
Zamshed Farhan23-Jan-13 20:58 
QuestionWin2008r2 x64, IIS7 & error &gt; Could not load file or assembly 'EeekSoft.Web.PopupWin' or one of its dependencies. The system cannot find the file specified. Pin
Member 38952521-Feb-10 9:43
Member 38952521-Feb-10 9:43 
Question[Popup UserControl] Making it work with abstract and master pages : possible ? Pin
claudetom0120-Jan-10 6:13
claudetom0120-Jan-10 6:13 
GeneralText Alignment Pin
Still Learning4-Nov-09 23:20
Still Learning4-Nov-09 23:20 
GeneralMy vote of 2 Pin
yhfcn24-Oct-09 19:01
yhfcn24-Oct-09 19:01 

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.