Windows Popups

WinPopups

In today's modern web 2.0 applications, AJAX makes it easy to prompt users for info, and return that information back to the server. Unfortunately, the basic JavaScript functions prompt and confirm allow for limited user input.

The classic way to get around this was to popup another browser window with window.open JavaScript call. The drawback to this approach is an unnecessary postback to the server: the user clicks a button (whatever), their browser pops open a new window, that new browser window asks the server for the page, and the server returns another page. That's a waste, and it contradicts the very seamless nature of a true AJAX application.

A better approach is to use some JavaScript code to display a popup to the user. The user, if you're tricky enough, will hardly notice that a new window hasn't really appeared.

With this in mind, I've written a JavaScript popups script that you can use to simulate Windows. To see an example, click the button below

Show Example Popup

Note that you can drag the window around, minimize (and then restore) it, and close it. In the title bar is a checkbox; when checked, the popup will stick to its screen position when you scroll; uncheck it, and it'll stay where it is on the page.

Including WinPopups

To use WinPopups, you'll need the following three files:

• WinPopups.js
• WinPopups.css
• WindowBG.bmp

You'll also need to reference the two files using the following HTML:

Typically, these are thrown into your HTML header.

Creating WinPopups

Creating WinPopups is easy; all's it takes is a line of code. Use the CreatePopup function to create a new popup. The CreatePopup function prototype is:

The function arguments are as follows:

• html: The popup's content HTML
• title: The title bar text
• left: The left position, in pixels
• top: The top position, in pixels
• centered: A boolean; indicates if the popup's inner content should be centered

Note that the popup will automatically be sized to its content; you don't need to indicate the size. Also, setting the left and top arguments to -1 will auto-center the popup on the screen.

The CreatePopup function returns a reference to the popup's inner content panel (div element).

Closing WinPopups

To close the popup, call the ClosePopup function. It's prototype:

Just pass it a reference to the popup's content panel (which was returned in the CreatePopup call).

Changing a WinPopup's Content

After you create a WinPopup (via the CreatePopup function), you might want to change its inner content. To do so, use the inner content panel (div) reference you got back from the CreatePopup call. After changing its content, be sure to make a call to the ResizePopup function to adjust its content panel to fit its new content. The ResizePopup function's prototype:

Resizing WinPopups

Its arguments:

• popup: A reference to the popup's content panel, returned by CreatePopup
• height: The new popup height
• width: The new popup width

Note that indicating -1 for both the height and width arguments will force the ResizePopup function to resize for you automatically; I'd recommend using this after you change a popup's content.