Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Pop-up windows

VCA225 Digital Production

Pop-Up Windows

Pop-up windows can be really annoying. In general people don't like it when a whole bunch of unasked-for windows appear when they click on a link (or worse yet, simply mouse-over a hot spot, or try to close a window). And yet, when used responsibly, pop-ups can be quite handy. One of the great advantages to javascript pop-ups is that you (the designer) can set the size of the window to be opened. You can also control (to an extent) whether or not the pop-up contains scroll bars, tool bars and other "extras." However, this method requires the user to have javascript turned on (and pop-up blockers turned off), so it's not foolproof. Nevertheless, I present it here for your edification. Down at the bottom I will provide links to some sites that have clever modifications on pop-ups.

Procedure

1. Before we get to the main page, you will need one or more other pages to link to (via pop-up). Create a new html page and save it as "popUpPage1.html." Put some text on it ("Hi world!" or something similar). If you want, create more ("popPage2.html," etc.).
2. Now for the main page: open a new HTML document and save it as "popUpMain.html" or something similar.
3. Create a link. Write "Click here" and surround it with an <a href="#"> tag:

<a href="#">Click here</a>

4. Now we need to add the javascript. There are many different ways we can go about this; for example, we could use a script which is entirely in-line (within the link tag). However, I prefer to keep most of my javascript in the header or in a separate document (much like CSS). In this case, we'll create a function and put it in the head. In the head portion of your page write:

<script type="application/javascript" language="javascript">
<!--
function popup(theURL,winName,features) {
window.open(theURL,winName,'width=300,height=300');
}
-->

</script>

Some explanations are in order. First of all, a function is a bit of code that contains a specific instruction to be carried out. Functions can be used multiple times within a document; this way if I have 50 links opening pop-ups I don't have to write 50 separate scripts; I simply attach this function to each one. We're calling this function popup. "Popup" is not a special term it's just a name we've chosen to identify this particular function; we could call it "bob" or "fred" if we wanted.

Functions often contain variables; these are things that are likely to change (or "vary") every time we use the function in our code. In this case there are three variables: theURL, winName, and features. The first one, "theURL," will contain the url of the page we are opening (we'll assign that in the link itself in a few moments). The second one,"winName," will be the name of the window we are opening; names are important if we want to target a link into a particular window (more on that later). The third one, "features," will contain all of the parameters we will set for the window (like size, scrollbars, etc.).

The next line contains a specific javascript command: window.open(). This command does just what it says, opens the new window. In the parenthesis we can assign our variable values. Note that we leave theURL and winName the same, this is because we will assign those values in the link below. However, in place of the third variable I've set a size: 'width=300,height=300'. Any and all parameters need to be inside the single quotes and separated by commas—no spaces. (One aside, I have seen folks use standard quotes (") in place of the single quotes(') and those seem to work just as well; perhaps a programming whiz can tell me what the difference, if there is one, is).

5. Okay, back to the link code; we need to add a little javascript to trigger the function. Add the bits in red:

<a href="#" onClick="popup('popUpPage1.html','newWindow1')">Click here</a>

The onClick command is triggered by a mouse click. Other options include onMouseUp, onMouseDown, onMouseOver, etc.

When the user clicks, that will trigger the function called "popup" that we wrote above. In the parenthesis we assigned the values we did not assign above, namely the url of the link followed by the name of the window we are opening. Once again, there is nothing magical about the window name; I just made it up.

6. Save it and try it; does it work?

Theme and Variation

1. You can control more aspects of the windows beside size. Add these to the function:

window.open(theURL,winName,'width=300,height=300,toolbar=yes,location=yes,
status=yes,menubar=yes,scrollbars=yes,resizable=yes);

Giving these features a "yes" values turns them on. To hide them, use "no." Once again there should be no spaces separating the features.

Warning: if you copy and paste the code above, remove the break between "location=yes," and "status=yes." There should be no spaces or breaks in the line (I had to add a return in order to fit the code on this page).

2. By setting size, toolbars, scrollbars, etc. in the function in the <head> we insure that ALL pop-ups using that function will be the same size and use the same settings. But what if you want to have different sizes for each pop-up? Or have different feature settings? Then we have to move the features out of the function and into the link code. The new function would look like this:

function popup(theURL,winName,features) {
window.open(theURL,winName,features);
}

And the link will now look like this:

<a href="#" onClick="popup('popUpPage1.html','newWindow1','toolbar=no,location=no,
status=no,menubar=no,scrollbars=no,resizable=no,width=300,height=300')">
Click here</a>

3. Images as links. You can use images as links simply by putting an image <img> inside the <a> tags, in place of the "Click here."

External Resources

• Javascript: Popup Windows (some additional functionality you can add, like changing focus).
• Unobtrusive JS Popup Windows (a more sophisticated & complex method).
• Unobtrusive JS Popup Windows (a variation on the above).
• Popup Windows (v4.5) (cool pop-ups that you can make with their "wizard").

Course Outline

Syllabus

Student Resources