The Perfect Pop-Up

If you believe the likes of Jakob Neilsen and his supporters, nothing is more evil than pop-up windows. And in many ways, this is correct. Why? Well, we'll list the reasons soon enough, but in a nutshell it's because they are nearly always poorly implemented or simply not needed. This tutorial will show that, with the right thought, pop-up windows can be used without upsetting anyone - particularly the person browsing your site.

Problems With Pop-Ups

The common faults with pop-up windows are:

• If scripting is disabled, or if the browser does not support JavaScript, the pop-up will not work
• Search engines cannot follow links to pop-up windows (scripted elements are always ignored)
• Pop-ups present accessibility problems
• Site management tools (e.g. DreamWeaver) cannot update links to pop-ups if you move the destination page to another section of your site
• Many people have pop-up killers running that close the window the moment it’s opened
• In Mozilla, there is an option to stop pop-ups opening in the first place

Phew. That's quite a list ... and you could probably add your own to this list. So, how do we address these?

Scripting Disabled

With scripting disabled, the pop-up does nothing. Simple as that. But if you used a standard <a href>, there would be no such problem. So, instead of using:

<a href="#" onclick="window.open('file.htm');">

you might use:

<a href="file.htm" onclick="window.open('file.htm');return false;">

This way, if scripting is disabled, the standard link still works.

However, perhaps there is a very good reason why you want the window to open on top of the current window. If so, just add a target attribute like so:

<a href="file.htm" onclick="window.open('file.htm');
return false;" target="newWin">

Bingo. Problem solved. But there's more we can do to this!

Search Engines

With the amended code above, search engines get a standard href to follow, so that's another issue ticked off our problems list.

Accessibility Problems

The biggest fault with pop-ups is that they take the focus away from the main browser window, and this can be disconcerting. They also present general usability issues aside from accessibility. How often have you seen someone launch a pop-up and then inadvertently click back on the launcher window and, thinking that nothing's happened, click the link again with no result? Of course the window has opened but it's now under the launcher window, and only moving down to the task-bar and selecting the window from there will solve this.

The trick is to inform the user that the link will open in a new window. There are a number of ways to address this:

• Include instructions as part of the link itself
• Add some instruction in a title attribute
• Use an appropriate icon to signify a pop-up is imminent

Open my test page (opens in a pop-up window)

Open my test page

To address the issue of losing focus on the main window, you can use JavaScript to re-set the focus. A proposed script for this appears at the end of this article.