Javascript popup windows, rel attributes and naming conventions
Posted by Dan Eastwell
What do you do if you want to semantically indicate to clever user agents that your link goes to an external site? You use rel="external".
What do you do if you’ve also got a window that pops up, for example, terms & conditions when clicked on?
The pop up window is fairly obtrusive and moves away focus: what you need is a way of presenting this information non-modally, so that focus is not pulled from the activity at hand?
Do you specify maybe a popover behaviour for that class of link, and use ajax to pull in the content? That's one way, and maybe a version of thickbox could be the answer.
In order to show let your script know you want this behaviour, rel="popup" might make sense, as shown in this arcticle on accessible popup behaviour .
The article suggests adding the behaviour and visual indication of a popup link with javascript, which is a good idea. However, the article suggests adding a parameter list to the rel attribute to denote this, as follows:
- A normal link - <a href="http://lloydi.com/blog/">
- A popup link (just requires class of popup in link) - <a href="http://lloydi.com/blog/" rel="popup">
- A popup in standard mode (toolbars included) - <a href="http://lloydi.com/blog/" rel="popup standard 800 600">
- A popup in console mode (no toolbars etc) - <a href="http://lloydi.com/blog/" rel="popup console 800 600">
- A popup link for fullscreen - <a href="http://lloydi.com/blog/" rel="popup fullScreen">
- A popup in standard mode (icon suppressed) - <a href="http://lloydi.com/blog/" rel="popup standard 800 600 noicon"
I'm nitpicking here, as it's a great article, but I'd change rel="popup" to be a more meaningful name, such as rel="additional-content", so that, in the same way as you don't specify a class="bigredlink" you wouldn't specify the behaviour in your link relationship naming.
Equally, I’d change the naming of the paramater items to be more meaningful, and then translate the parameters from a lookup table. For example, rel="popup fullScreen" could become rel="modal", implying you've left the site altogether, or need to close or complete your viewing of this window's content before you can return.
Your new keywords could be looked up in javascript and translated to an array of parameters.
This makes your HTML code cleaner. But I think this is endemic of a wider issue.
