The Perfect Pop-Up

Site Link Management Tools

If you're in the habit of moving pages around using tools like DreamWeaver or a content management system, you would hope that links are maintained. With standard hrefs, they usually are (depending on the tool you use), but with JavaScript it's unlikely. Returning to our code for a moment:

<a href="file.htm" onclick="window.open('file.htm');  
return false;">

The link above would be maintained quite nicely ... almost. Half of it would -- the href part. But the onclick part would probably be ignored. This is a big problem. You might think that your links have been updated, but in fact people who do have JavaScript enabled would be sent to a missing page. So, you might find your code would be changed to:

<a href="newlocation/newfile.htm" onclick="window.open('file.htm');  
return false;">

And if you were to run a link validator on the launch page, it would appear that your link is indeed valid. So, how do we address this issue? Like so:

<a href="file.htm" onclick="window.open(this.href);  
return false;" target="newWin">

There's only one link to maintain, and the correct href will be used for the window.open method. Excellent – now we're getting somewhere!

Pop-up Killers/Mozilla Disable Pop-Ups

As with the issue of JavaScript being disabled, merely providing a standard href means that the link will still work. Now we only have to address the issue of which window has focus...

The Perfect Pop-Up Script

We recommend using a function that can be placed in some commonly-shared JavaScript code (as we’ve done with this site), and which can easily be called from anywhere in the site. This is far more preferable than laboriously writing the window.open function out each time. In addition to the URL, you might want to include parameters such as height and width, and what type of pop-up style to choose (it's up to you what styles you define).

Here's the code I recommend:

var newWin = null;  
function popUp(strURL, strType, strHeight, strWidth) {  
 if (newWin != null && !newWin.closed)  
   newWin.close();  
 var strOptions="";  
 if (strType=="console")  
   strOptions="resizable,height="+  
     strHeight+",width="+strWidth;  
 if (strType=="fixed")  
   strOptions="status,height="+  
     strHeight+",width="+strWidth;  
 if (strType=="elastic")  
   strOptions="toolbar,menubar,scrollbars,"+  
     "resizable,location,height="+  
     strHeight+",width="+strWidth;  
 newWin = window.open(strURL, 'newWin', strOptions);  
 newWin.focus();  
}

The additional code in the function handles the focus aspect. If you click a link that calls this function, then click back on the page such that the pop-up is hidden, and then click on another pop-up link, the code assesses the state of the pop-up, then closes the pop-up window and re-opens it with its new dimensions.

To call the function you would use the following code:

<a href="my-pop-up-window.htm"  
 onclick="popUp(this.href,'console',400,200);return false;"  
 target="_blank">This is my link</a>

Or, to use some actual examples:

This is my pop-up link (console mode)
This is my pop-up (fixed mode)
This is my (elastic mode)

Note: The 'return false' part effectively cancels out the default action of the href, so it won't open the pop-up and a normal HTML windows - it will open one or the other. Try the links above with and without JavaScript enabled to see for yourself.

What more could you ask for? Well... there is one final piece of icing on this cake.

Closing the Pop-Up

Once the pop-up is opened, we might rely on people to use the browser/operating system controls to close the newly opened window.

But people don't always do this! So we should provide a link (or button, if you prefer) in the pop-up window itself to allow users to close it. However, let's assume that our user has scripting disabled, and that the pop-up window was opened via the standard href route. The 'close this window' link that you so thoughtfully provided will prompt a not very friendly dialogue like this:

To get around this problem, you should write the close link to the Web page using JavaScript, and check to see if the window was opened as part of a window.open() method. That way, if it is a true pop-up, the link will appear and the close() method will work; if it is not a true pop-up window, the link will not appear.

Here's the code to do this:

<script language="JavaScript">  
<!--  
if (window.opener)  
 document.write('<strong><a href="#" onclick="self.close();">' +  
   'Close this window</a></strong>');  
//-->  
</script>

Try the link again, and see for yourself:

This is my pop-up (fixed mode)

Conclusion

Hopefully this tutorial has demonstrated that pop-up links can be accessible, search-engine friendly and non-invasive. However, even if you follow all of this advice you should still ask yourself if you really need to open a new window.

One final point to note is that pop-ups should be something that people opt-in to use, so don't use a window.onload or window.onunload event to force your pop-up window on the user. That always annoys the heck out of people… unless they wanted to buy an X10 camera or visit the 'World's Largest Online Casino' but didn't know it, that is!