When you think of pop-up windows, you may laugh at me because making a link open a new window is one of the easiest things you can do with HTML. In the old days, we simply put a “target=xxxx” tag to create a pop-up window. This can be done in almost an instant, but undeniably it’s ugly.
You can of course use the Javascript:
<a href=”javascript:window.open(url);”>Your link here</a>
But this is ugly and dirty, both in terms of the accessibility and pop-ed up window itself. Look at the code snippet above, the a href tag is not linking to a link but instead it is running some javascript. This means the whole meaning of the link is gone!
Okay, you got the point. So, how do we make it accessible and good, with clean code?
Very easy, we use GreyBox. Basically, GreyBox makes our life easier by supplying the codes needed to build beautiful and clean pop-up windows. GreyBox uses the “rel” attribute. rel is used to describe the relationship between the current page and the href destination of the anchor. The whole line becomes something like this:
<a href=”http://google.com/” title=”Google” rel=”gb_page_fs[]”>Launch google.com in fullscreen window</a>
It’s very easy to setup and use GreyBox even if you are a first time user… just follow the instructions on their website. It’s FREE to download and use!
Why GreyBox?
- It does not conflict with pop-up blockers
- It’s only 22 KB!
- It’s super easy to setup
- It’s super easy to use
- You can easily alter the style as it is controlled through CSS
Now, GreyBox really creates pop-up windows that don’t suck! 🙂