Variably-Sized Pop-Ups With No onclick

By Spencer Sundell
19 Feb 2006
Original blog post

This is a variation on Jeremy Keith's script in DOM Scripting (Friends of Ed / Apress, 2005), pp. 86-88. (The same chapter is available on the official book site.)

While Keith's original was intended as an example of other concepts and not a be-all-end-all pop-up script, it has some noteworthy limitations.

  1. The dimensions of the pop-up are hard-set in the JavaScript, thus making all pop-ups the same size. Also, modifying the sizing requires delving into the script's innards.
  2. You cannot concatenate style classes -- you can only style based on the one class name ("popup" in the example) or globally for all A tags, thus limiting your ability to custom style any given link. Also, attempting to add additional class(es) breaks the pop-up functionality.
  3. The pop-up's window name is also hard-set in the innards of the script -- all secondary pop-ups can only target the original pop-up.

My variation addresses these limitations while retaining all of the original functionality and adding only 7 new lines of code, plus 4 global variables for easily setting key default values (class name to trigger on, width, height, and window name).

I also threw in a couple lines in the generic popper-upper script itself to center new pop-ups -- a personal preference that can be removed or modified as is your want. (Fwiw, the same approach I use for applying custom sizing could also be applied for custom positioning.)

Caveat: At this writing, I've not just yet tested this in Safari or IE7 (or IE5/Win), but it's working well in FF and IE6.

View examples page. Download script file with inline code notes. Download optimized script file (with usage notes).

The markup for links is quite simple (and still validates). To launch using the defaults, Keith's original markup still applies:

 <a href="pop.html" class="popup">link</a>

To specify dimensions different from the defaults, you simply append the desired width and height number values to the pop-up's class name. In my code, both numerical values must be 3 digits. The format, then, is this: popupWWWHHH

So, this example will launch a pop-up sized to a width of 215 pixels and a height of 95 pixels:

 <a href="pop.html" class="popup215095">link</a>

To launch or target a pop-up with a window name different from the default, simply add a target attribute to the link tag. Caveats: this will of course always launch a new window, even if JavaScript is disabled. Also, if for some weird reason you're using frames or iframes, take care not to target an existing frame name or things will get ugly.

 <a href="pop2.html" class="popup215095" target="anotherPopup">link</a>

To apply additional CSS class(es) to a given pop-up link, simply concatenate that class name as usual, making sure it comes after the pop-up class. (And yes, you can concatenate more than one class if desired.) Like so:

 <a href="pop.html" class="popup specialLink">link</a>

Or:

 <a href="pop.html" class="popup215095 specialLink">link</a>

Et cetera.

Some functioning examples:

Pop-up using defaults only. Now launch another in the same window.

Pop-up w/ custom sizing but using default pop-up name.

Custom-targeted pop-up, using default sizing. Now new page targeting the same custom-named window.

Pop-up w/ custom sizing and custom name. Now new page targeting the same window.

Custom-targeted pop-up w/ custom sizing and additional CSS classes for the link. And of course, hit the same pop-up.