Web Development Tools that Enlighten
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
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
type an octothorpe (
#) character, or maybe
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
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:
It will also add the following function to the head area of the page:
window.open(theURL,winName,features); return false; }
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?
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')">
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
call will open the page in your custom browser window and the
false will keep it from opening the other normal window, or acting on
the link at all. This is exactly the behavior we wanted.
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.