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