Accessible Popups

Throughout the examples above I've been using the javascript: link style. This is an easy way to execute JavaScript functions, instead of linking to a dummy anchor and using event handlers, as in

<a href="#" onClick="poptastic('page.html');">Pop it</a>

For modern browsers we can write

<a href="javascript:poptastic('page.html');">Pop it</a>

This is an easy way to show popups in action, but is not the recommended way of actually doing popups for real. Creating popups using the javascript: mechanism is bad for two reasons:

1. Users using browsers that don't support JavaScript (or who have disabled JavaScript) won't be able to follow these links, and so will miss the potentially vital information contained in your popups.
2. Most browsers allow you to right click a link and either open it in a new window or a new tab. Since these links don't have proper href values, they'll open blank windows, which can be very annoying.

To this end, there is a more gracefully degrading method of linking to popups, which allows the links to work both ways. The ideal version of the above link is

<a href="page.html" onClick="poptastic(this.href); return false;">Pop it</a>

This will create a link that opens the popped page as a normal page in a non-JavaScript browser. In a modern browser this default action is suppressed (by return false) and the page is popped up as you want it. The URL you're opening is set as this.href, which tells JavaScript to look at the href value of the current link and use that, meaning you don't have to write the same URL twice. » Try it here. You should always code your popups like this, so nobody is left out.