Polished Popups

(May 2009 Issue)

Property Name



The ID of the control that will trigger the popup to appear.


The ID of the control that contains the popup content (typically a Panel control).


The CSS class name to apply to the background area when the popup is overlaid upon it.


Displays a shadow effect around the popup when this Boolean property is toggled to its non-default of True.


The horizontal position of the left edge of the popup. (Optional)


The vertical position of the top edge of the popup. (Optional)


Optionally specifies JavaScript to be run when the popup is dismissed by the user.


The ID of the control used to dismiss the popup.


Optionally specifies JavaScript to be run when the popup is abandoned by the user.


The ID of the control used to abandon the popup.


The ID of the control used to act as the draggable window header area.


Specifies which browser events cause the popup to be automatically re-centered.

Figure 4: ModalPopup extender properties

Of course, any page that utilizes controls from the ASP.NET AJAX Control Toolkit requires a reference to the toolkit s assembly near the top of the ASPX file (before any HTML content):

<%@ Register Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

And each such page also requires a ScriptManager control declaration not far below that:

runat="server" />

It should be noted that no server-side code was required for this solution.

The popup can be placed via the X and Y coordinate properties to define precisely where the top-left corner of the popup will appear. If the X property value is omitted, the popup will be automatically centered horizontally within the window. Likewise, if the Y property value is omitted, the popup will be automatically centered vertically. In most cases, these values never need to be touched because the default centering behavior is desirable in most cases. The RepositionMode property can be used to specify which browser events trigger the popup to be automatically re-centered on screen. For example, resizing and scrolling events typically suggest good times to re-center the popup. The RepositionMode property value should rarely need to be tinkered with as its default value is almost always the best choice.

The BackgroundCss property specifies which CSS class name to apply to the standard page content when the popup has appeared and captured focus. It often is used to specify a disabled grayed-out look to the temporarily inaccessible background. Failing to set this property would allow the user to fully interact with the background in a very unnatural and non-modal way. So remember to set this property; it should not be considered optional. The complete CSS used for the delete confirmation dialog box example page is listed in Figure 5.



background-color: Gray;






width: 500px;

background-color: #FFFFBB;

border-color: Black;

border-width: 4px;

border-style: double;

text-align: center;

cursor: move;




width: 100px;

background-color: Yellow;

margin-left: 5px;

margin-right: 5px;

margin-top: 20px;

margin-bottom: 20px;


Figure 5: The CSS classes utilized by the page shown of Figures 2 and 3

The PopupControl Extender

Clearly, the ModalPopup extender is great for situations where modal interaction is required. But what about when non-modal user interaction is preferred? It can be useful at times to pop up an informational overlay area that the user may choose to use or ignore. For example, Google typically displays a list of matching suggestions below as search phrases are typed on to its famously desolate home page. Situations like these are where the PopupControl extender really shines.

Construct a ComboBox

Windows developers are spoiled by the built-in ComboBox control that lets a user type in a value or select one from the adjoined dropdown list. ASP.NET doesn t include a ComboBox web control. Finally, though, it is easy to construct your own ComboBox by using the PopupControl extender to fuse a ListBox control to the bottom of a TextBox control. The ListBox appears only while the TextBox has focus. Because this pop-under ListBox is not modal, the user can continue to interact with all parts of the page while it is displayed, just as you d expect from a ComboBox.

As with the ModalPopup extender, the PopupControl extender also employs the same three-way trigger-extender-popup link metaphor as its scaffolding. Again, the TargetControlID property is used to specify the trigger control, and the PopupControlID property is used to specify the control that will appear on demand. The code listed in Figure 6 displays three code blocks representing each of these links, this time wrapped inside an UpdatePanel.

The code listed in Figure 6 essentially creates a ComboBox control by utilizing a PopupControl extender to position a disappearing ListBox at the bottom of a TextBox. Figure 7 shows the page at runtime, with the popup ListBox area displayed in yellow below the TextBox.


ID="PopupExtender1" runat="server"




CommitProperty="value" >

ID="lstMoods" runat="server"


style="visibility: hidden; width: 155px;"

BackColor="#FFFF99" Rows="6">







Figure 6: The TextBox triggers the PopupControlExtender to display the ListBox below it

Figure 7: The yellow ListBox appears only when the TextBox above it has focus, essentially creating a ComboBox control

The CommitProperty property is used to specify that (in this case) the client-side Value property of the TextBox should be populated with the user s selection from the popup dialog. This and other noteworthy properties of the PopupControl extender are listed in Figure 8.

Property Name



The ID of the control that will trigger the popup to appear.


The ID of the control that contains the popup content (typically a Panel control).


Optionally used to specify the location of the popup relative to the target. Options include: Left, Right, Top, Bottom, and Center.


Used for pixel-perfect fine tuning of the popup location.


Used for pixel-perfect fine tuning of the popup location.


Optionally specifies which of the target control s client-side properties should be filled with the popup s result value (if any).


Optionally specifies JavaScript to be run when the popup is closed.

Figure 8: PopupControl extender properties

Then all that s required to complete the ComboBox functionality is a dollop of server-side code to determine the user s popup window selection and return that value to the client. The following server-side code goes in the ListBox s SelectedIndexChanged event:

'Imports AjaxControlToolkit

Dim val As String = lstMoods.SelectedValue



The Commit method returns the user s ListBox selection to the client via asynchronous postback, thanks to the UpdatePanel. Then it is placed in the Value property of the TextBox s rendered HTML input text element (as specified by CommitProperty). The final result is the fully functional ComboBox control shown in Figure 7.


JavaScript alerts and confirmations may often suffice, but today s savvy web users expect more. Thanks to the ASP.NET AJAX Control Toolkit, it no longer takes much additional work to turn tired old message boxes into mouthwatering eye candy. The ModalPopup and PopupControl extenders take care of mundane functional details, so you have more time to design attractive and intuitive user interfaces. Professional touches like these are the rocket fuel that propel rising star developers to new heights.

Steve C. Orr ([email protected]) is an ASPInsider, MCSD, Certified ScrumMaster, Microsoft MVP in ASP.NET, and author. He s been developing software solutions for leading companies in the Seattle area for more than a decade.


Hide comments


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.