How to Implement Pop Up Windows

Okay, I know, you're just waiting for me to say something like pop up windows are evil. Some people do feel that way. They contend that, if they want something opened in a new window, they will right-click the link and choose "Open link in new window".

There are, however, a good many legitimate reasons to use a pop up window. One of the most common is displaying a group of small thumbnail images that the user can click to view a larger image. However, since I'm all about accessability, I have to tell you that I hate the way a good many designers implement pop up windows. I don't blame them for what they've done. The tools they use encourage this bad behavior.

Consider Dreamweaver. Dreamweaver is a superb web page editor. It can make a web designer's life much easier. It even has a built-in "behavior" that can open a popup window. Unfortunately, most people misuse it.

In order to apply the open browser window behavior, you must first create a link. You cannot simply apply a behavior to text. Plain text supports no event handlers in the document object model. So here's the typical scenario a designer will use. First, select some text. Next, look in the property inspector and type javascript:; in the Link field (that's the word javascript followed by a colon and a semicolon):

Doing this creates what is commonly referred to as a null link. In other words, it's a link that doesn't do anything. Note that there are a number of variations on this tactic. instead of javascript:; they might type an octothorpe (#) character, or maybe javascript:void(0);. Of these, the last one is probably the most syntactically correct. But wait! What good is a link that doesn't do anything? Well, what it does is it makes the text a link, which means that any of the events that a real link supports can be used on it. This is what allows you to attach a behavior to text.

So now you have a link, you can apply the open browser window behavior to it. Dreamweaver will re-write the code for your link to be something similar to this:

<a href="javascript:;" 
onclick="MM_openBrWindow('popups.php','','width=500,height=400')">

It will also add the following function to the head area of the page:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
  return false;
}
//-->
</script>

So now, when a user clicks the null link, the JavaScript function MM_openBrWindow will be called and the page will be opened in a new, custom styled window, which will be a specific size and contain only those features that the designer specified in the open browser window dialog. Or will it?

What if the user has JavaScript disabled? What if the user is browsing the site with a device that does not support JavaScript? What about search engines? If the content of the pop up window is important, you may want search engines to index it. Guess what? Search engines don't execute JavaScript! Search engines will not be able to index the page. There is another problem with this type of null link approach. Many users look at the status bar to see where the link goes before clicking it. With this null link, all the user will see is the word JavaScript:;.

So what's a designer to do? Fear not! There is a solution. Instead of going to all the trouble of creating a null link, create a real normal link to the page you want displayed.

Now attach the Open Browser Window behavior to that link. Your link code will now look like this:

<a href="popups.php" 
onclick="MM_openBrWindow('popups.php','','width=500,height=400')">

Now, when the user passes the mouse pointer over the link, the status bar will correctly display the URL of the page where the link goes. You also have a link that a search engine can follow to index the page. Of course, this introduces a new problem. If a user has JavaScript enabled, the pop up window will open, but the page where the link resides will also go to the same page.

That's clearly not what you wanted to do. Unless you're trying to validate your page to the XHTML Strict standard, you can also set the Target of the link to be _blank. That will cause the actual link to open the page in a new normal browser window, sized the way the browser sizes itself and with all the standard features that the user normally sees. The page where the link resides will remain where it is.

We're getting closer, but still not quite there. We're opening two browser windows. One of them is normal size with normal features and one is custom sized with specific features. Now, you have to enter that strange land known as code view. Wait! Don't run away! It's not really that bad. Assuming that your link is still selected, the link will be highlighted and displayed, so it will be easy to find. All you need to do is add two words to the code to fix this last problem. Change the above link to this:

<a href="popups.php" 
onclick="MM_openBrWindow('popups.php','','width=500,height=400');return false">

All we've done is add the words return false separated from the closing parenthesis by a semicolon. So what does that do? Simple. It prevents the real link from being activated. If a user has JavaScript enabled, the MM_openBrWindow function call will open the page in your custom browser window and the return false will keep it from opening the other normal window, or acting on the link at all. This is exactly the behavior we wanted.

Now, what if the user has JavaScript disabled, or doesn't have a JavaScript capable browsing device? The JavaScript will not be executed. That means that the MM_openBrWindow function call and the return false will be completely ignored. Since the return false is ignored, the normal link will be acted upon and, if you specified _blank for the link target, the linked file will be opened in a new, normal size browser window with the normal features. If you left the target empty, the users current browser will follow the link. In other words, the link will work either way!

By taking just a couple of simple, extra steps and typing two words, we have made the link usable for all users. This makes the site much more accessible and more user friendly. Remember, users are the reason for web sites to exist.