Variably-Sized Pop-Ups with No onclick

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 CSS 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.

Update:  Yep, works in everything — even (gasp!) IE5/Mac.  Meanwhile, watch this space for an updated and more flexible version.

For full details and sample markup, visit the examples page. (Unfortunately TinyMCE — the otherwise excellent HTML editor used in WordPress — is either too stupid or too smart for its own good to allow me to post valid HTML samples here.)

Or — download script file with inline code notes, and/or download the optimized script file (with usage notes).

Comments are closed.