Javascript Popup Windows

Quick explanation: The "standard" way of doing popups using Javascript to open the window allows you to control the settings for the window (size, toolbars etc.), but the link will only work if the client supports Javascript. While many people obviously consider this an acceptable problem, it's completely unnecessary - using the technique shown below you can retain full control over the window, but still have the link function properly if the client doesn't support Javascript. There are also other advantages to this technique over some of the other common ways people implement popups. The disadvantages of the other (inferior) techniques are demonstrated in Comparisons & demonstrations.

Introduction

Frequently designers want to make a popup window and specify the size & appearance (whether the toolbars, url entry edit etc. are shown). Since basic HTML does not directly support doing this, it must be done using Javascript.

However, it seems that a lot of designers have been taught a poor way to do this, and these substandard techniques come with problems: the major one is that the links don't work at all if Javascript is off. Some of the techniques also do other screwy things like scroll to the top of the page (that is, the page that the link is on), and/or fail completely if the user shift+clicks (users can shift+click any normal link to make it open in a new window, so they expect to be able to do the same with your links, too).

There is no reason why it has to work like this. The technique below gives designers just as much control over the popup, but also supports shift+clicking, doesn't scroll to the top, and "degrades gracefully" so that the link will still work (that is, popup a new window, albeit one not styled as we'd like) if the client doesn't support Javascript or it's turned off.

The right way to make popup windows

Let's say that you have a simple link to some page (say, /):

test link

Instead of replacing the current page (in the current window), you would like to make this page open in a popup window. Here's how to do it:

1. First, add a target parameter to the anchor tag, like this:

   test link
   

   The target parameter specifies the name of the popup window (just pick a name that's appropriate for your application). If there's already a window named that, the page will be loaded in that window. If not, a new window will be opened and the page loaded in that new window.

   The window.open() method

   If you're not familiar with window.open(), here's how it works. It takes three parameters: The URL/link to the page you want to open. We're putting the URL/link in the anchor tag itself, so we can grab that using this.href (this refers to the A tag) rather than having to put the URL in there twice. The name of the window. This works just like the target parameter in the anchor tag, and in fact, we want to make this the same as what we're putting in the anchor tag, so that they refer to the same window. The settings for the window. This is what we're ultimately interested in. Refer to the documentation for window.open() for full details, but you can just work off the example below. Put all the settings you care about here - for example: 'width=240,height=180,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0' There is actually an optional fourth parameter, 'replace' (replaces the history of that window), that we don't need to use, so we can just leave it out (see the window.open() reference for details). For example: window.open(this.href, 'mypopuptarget', 'width=240,height=180,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0');

2. Now we want to specify the appearance of this new popup window. We do this by adding a Javascript handler for the OnClick event. This handler uses the window.open() method to create the new popup window & control it's appearance (see the sidebar if you aren't familiar with window.open()).

   You can probably work this out for yourself, but the OnClick event is fired when the user clicks the link. Conveniently, it happens before the browser actually opens the page, so it gives us the opportunity to open the window first. We give this new window the name we put in the target attribute above, and that way, the page gets opened in our new window.

   Although the anchor tag has the URL or link that we want to open in the href parameter, we also use it here in the first parameter to window.open().

3. Now the OnClick handler will actually do everything that we want to happen, so we can add a return false; statement after the window.open() call. Returning false essentially stops the processing of the click, so the browser doesn't go ahead and open yet another window.

   We do this because if we don't, and the user has in fact shift+clicked the link, the browser will open that in an additional new window - not the one we just opened and loaded. It's a small detail, but taking care of it makes this technique AFAIK perfect.

Here's what the full tag should look like:

????OnClick="window.open(this.href, 'examplepopup2', ????????'width=240,height=180,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0'); ????????return false;">test link

As you can see, this is a pretty big tag, so (especially if you're using the same popup settings for more than one link), it's definitely a good idea to make a Javascript function that does the window.open() call, rather than repeating the same stuff over and over. Remember that you can pass the URL/link and/or window target in to your function in variables. Here's what the function might look like:

Now our example above is much simpler:

????OnClick="openpopup(this.href, 'examplepopup2'); return false;">test link

Nice one.

Comparison & demonstrations

Technique	Demonstration	Can control popup window appearance	Link works if Javascript is unsupported or disabled	Works correctly if user shift+clicks	Other problems
Normal link with target set in tag, no Javascript (inadequate)	test link	No	Yes (Simulation)	Yes	?
Link with target set and Javascript window.open OnClick handler (recommended)	test link	Yes	Yes (Simulation)	Yes	?
Link with Javascript window.open code as the href (bad)	test link	Yes	No (Simulation)	No	?
Link with "#" as the href, and Javascript window.open OnClick handler (awful)	test link	Yes	No (Simulation)	No	Scrolls back to the top of the page (the page that the link itself is on, not the popup). It's really annoying - where did you learn to use this? Why god, why??