Javascript Popup with graceful fallback

I’ve struggled with popups for some time now. I’ve never really found a good way to handle popping up a new window when clicking a link. Sure, there is the target=”_blank” method but I’ve heard that in XHTML1.0 that is not actually valid. That tells me that browsers can still handle this but might not sometime in the future (or it might end up being included in some kind of quirks rendering mode in the future). A standard Javascript popup is another option but is too easily disabled.

This method will actually do both by creating an event handler.

To make this work you will need the following files:

• add-event.js
• popup.js
• 

Then you will need the following code in your header:

<script type="text/javascript" src="#request.urlRoot##request.urlPath#scripts/add-event.js"></script>
<script type="text/javascript">var PATH_TO_POPUP = "/store/media/css/";</script>
<script type="text/javascript" src="#request.urlRoot##request.urlPath#scripts/popup.js"></script>

The PATH_TO_POPUP variable only defines where the .gif image is stored.

To implement this you simply need a normal link:

<a href="http://www.google.com">Google</a>

Add a rel attribute to this to in order to define the popup. You need to pass a space separated list of attributes for the popup in this order: “popup” type width height noicon.

“popup” is always first. This is what actually makes the link a popup link. Type is the type of popup, “standard”, “fullscreen”, or “console”. Width and height are just integer values and noicon is optional. If it is passed in, the pop-up.gif image will NOT be displayed next to the link. Here’s what the link will look like when you are done:

<a href="http://www.google.com" rel="popup standard 800 600 noicon">Google</a>

The great thing about this is that if the user has javascript disabled, the link will still work without any errors, it will just not open a new window.

Thanks to http://www.accessify.com/features/tutorials/the-perfect-popup/ for this method. The only thing that I really changed is I added the PATH_TO_POPUP variable for the ability to move that image around and I created a new type of popup called “console_scroll” which adds scrolling to the console type.