02.19.06
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.
- 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.
- 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.
- 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).
