Accessible, class based, javascript pop-up windows

Usually pop-up windows are implemented by plonking some code like the following into the middle of what is hopefully lovingly groomed, semantically marked up XHTML devoid of Javascript and other foreign bodies.

<a href="#" onclick="window.open('popup.asp','name','');return false;">pop it up</a>

Often the pop-up window isn't given focus so it languishes in the background, leading you to believe that clicking the link did nothing. So you click it some more (or worse abandon it...), but that leads to more tragedy as the 'name' is usually not specified so a new window is opened every time the link is clicked - horrors!

It doesn't stop there - leaving out the return false; statement makes the window scroll back to the top, so the by now beleaguered user has to scroll back down to the link to click it again.

Worse again, if by chance the browser has no Javascript (switched off by the user, hand-held device, screen reader, etc...) then clicking on the link does nothing. Also nothing happens if someone is using keyboard navigation - no onkeypress event is defined!

What a disaster - no wonder people hate pop-up windows!

The solution

By specifying the link correctly on the page and using a smattering of DHTML we can remedy all of this.

First of all the link should appear like this on the page

<a href="popup.asp" class="SimplePop">pop it up</a>

Clicking, or keypressing, on this now will at least bring you to the page in question, even if it is formatted to be displayed in a narrow window and looks awful in the full-size browser window, console yourself with the fact that your site visitors can see it and that you are one step closer to Bobby approval.

The javascript function on addition of the onload event handler are removed from the page as laid out in 'Externalising Javascript'

Then we need to create the initSimplePop function. What this function does is to check that the browser implements the DOM correctly, then searches through the page for any anchors and uses the addHandler function to add an event handler to each anchor that has a class of SimplePop

function initSimplePop() {
   if ( document.getElementsByTagName ) {
   var Temp = document.getElementsByTagName("a");
   for ( i = 0 ; i < Temp.length ; i++ ) {
      if ( String(Temp[i].className).indexOf("SimplePop") != -1 ) {
         Temp[i].onclick = SimplePopWindow;
            Temp[i].onkeypress = SimplePopWindow;
         }
      }
   }
}

SimplePopWindow = function() {
   Temp = window.open(this.href, 'SimplePop',
         'width=500,height=500,scrollbars=yes');
   Temp.focus();
   return false;
}

Now, when someone clicks on a link with a class of SimplePop the event handler will launch the SimplePopWindow function, opening a window with no menu bars etc. and that displays the anchors link.