If you believe the likes of Jakob Neilsen and his supporters, nothing is more evil than pop-up windows. And in many ways, this is correct. Why? Well, we’ll list the reasons soon enough, but in a nutshell it’s because they are nearly always poorly implemented or simply not needed. This tutorial will show that, with the right thought, pop-up windows can be used without upsetting anyone – particularly the person browsing your site.
Problems With Pop-Ups
The common faults with pop-up windows are:
- If scripting is disabled, or if the browser does not support JavaScript, the pop-up will not work
- Search engines cannot follow links to pop-up windows (scripted elements are always ignored)
- Pop-ups present accessibility problems
- Site management tools (e.g. DreamWeaver) cannot update links to pop-ups if you move the destination page to another section of your site
- Many people have pop-up killers running that close the window the moment it’s opened
- In Mozilla, there is an option to stop pop-ups opening in the first place
Phew. That’s quite a list … and you could probably add your own to this list. So, how do we address these?
Scripting Disabled
With scripting disabled, the pop-up does nothing. Simple as that. But if you used a standard <a href>, there would be no such problem. So, instead of using:
<a href="#" onclick="window.open('file.htm');"> you might use:
<a href="file.htm" onclick="window.open('file.htm');return false;">This way, if scripting is disabled, the standard link still works.
However, perhaps there is a very good reason why you want the window to open on top of the current window. If so, just add a target attribute like so:
<a href="file.htm" onclick="window.open('file.htm');
return false;" target="newWin">Bingo. Problem solved. But there’s more we can do to this!
Search Engines
With the amended code above, search engines get a standard href to follow, so that’s another issue ticked off our problems list.
Accessibility Problems
The biggest fault with pop-ups is that they take the focus away from the main browser window, and this can be disconcerting. They also present general usability issues aside from accessibility. How often have you seen someone launch a pop-up and then inadvertently click back on the launcher window and, thinking that nothing’s happened, click the link again with no result? Of course the window has opened but it’s now under the launcher window, and only moving down to the task-bar and selecting the window from there will solve this.
The trick is to inform the user that the link will open in a new window. There are a number of ways to address this:
- Include instructions as part of the link itself
- Add some instruction in a title attribute
- Use an appropriate icon to signify a pop-up is imminent
This way, if focus is lost, the user may make the connection, for example:
Open my test page (opens in a pop-up window)
To address the issue of losing focus on the main window, you can use JavaScript to re-set the focus. A proposed script for this appears at the end of this article.
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!
Ian Lloyd
