JavaScript Workshop » What’s Wrong with Popups?

Should you use popup windows? Popup windows have gained a bad reputation from marketers' aggressive use of them, but even requested popups can be barriers to good usability. There are situations where popping a new window is arguably the most appropriate solution. Popups are mostly used for one-page interfaces or those in which history navigation is discouraged, such as a survey or a logon page for a commercial web site.

My use for external windows (not popups) use scripting that degrades if not available. We have already discussed this issue at our unobtrusive discussion.

So what is wrong with popups?

1. popups are generated from links, though those links do nothing when scripting is not available
2. popup windows that don't have a status bar, so you can't necessarily tell whether the document has loaded or stalled, is still loading, etc.
3. popups that don't give users the ability to resize the window, and popups that fail to generate scrollbars for content that might scale outside the window.
4. windows that are "chromeless" or open to the full size of the user's screen

These issues are not just questions of usability, but of accessibility as well. For example, screen-reader users may not be notified by their devices that a new window has opened. This could obviously case confusion if they then attempted to go back in the browser history (they can't). The same thing might happen for a sighted ser is a window opens at full-size: you and I may be familiar with using the taskbar to monitor open windows, but not all computer users are --- they may not even realize that a new window has popped up.

Also, bear in mind that, from a developer's perspective, popup windows are not guaranteed to work: most browsers now include options to suppress popup windows, and in some cases suppression occurs even if the popup is generated in response to a ser event.

How Do I Minimize the Problems?

1. Make sure any triggering link degrades properly when scripting is not available.
2. Always include the status bar.
3. Always include a mechanism to overflow the content: either allow window resizing, or allow scrollbars to appear, or both.
4. Don't open windows that are larger than 640x480 pixels.

Here is a generic popup function created by Cameron Adams that’s based on the guidelines above as well as the code (.zip) for you to review.

The window.open method can take a number of arguments in addition to the URL and window name which specifies whether the window should have particular decorations, such as the menu bar, tool bar, or address (location) bar. These arguments are passed as a comma-delimited string to the third argument of window.open.

In popup function, the menubar, toolbar and location arguments are all preset to no because these elements are rarely useful for popup windows --- they're navigation tools after all.

Once a new window is open, you can bring it to focus using the object's focus method. This isn't usually necessary since it generally happens by default. But it may come in handy if you're opening multiple windows:

var cpanel = makePopup(cpanel.html, 480, 240, 'resize');
cpanel.focus();

Alternatively, you may want to open a popup but keep focus in the primary window (thereby creating a so-called "popunder"). You can take the focus away from a window using its blur method:

var cpanel = makePopup(cpanel.html, 480, 240, 'resize');
cpanel.blur();