Under the Hood: Details of the Popup Script

In this page we'll look at the technical details of the popup scripts. If you just want to quickly implement popups you probably will do better starting with Popup Windows: The Basics.

The Script

Let's first look at the script function that opens the popup. This function can be called from a variety of objects such as a link, an image map, or the <BODY ...> element for opening the popup automatically.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<SCRIPT TYPE="text/javascript">  </SCRIPT>

Line 1 opens the script element, and line 2 opens a comment (as you should always do in scripts).

Line 3 begins the popup() function, taking two arguments. The first argument, mylink, is the object (the link or image map) calling the function, or it can be a string representing the URL for the popup. The second argument, windowname, is a unique name for the popup window. Every popup window must have a unique name. More than one link can target the same popup by using the same unique popup name.

Line 4 has the opening bracket for the function.

Line 5 tests for the existence of the window.focus method. window.focus is how we bring the popup to the front every time, even though it was already open. Some older browsers do not have window.focus -- those browsers degrade gracefully by failing out of the function and going to the popup's URL in the current window. note that there are no parentheses after window.focus because we are testing for the existence of the function, not running it.

Line 6 declares the href variable, which holds the URL to which the popup should navigate.

Lines 7 to 10 figure out what that URL is. In 7 we test if mylink is a string. If it is a string, in line 8 we assign to href the value of the string. If mylink is not a string then we assume it is an <A ...> or <AREA ...> object and in line 10 assign to href the value of the objects href property (which was set in the HREF attribute of the <A ...> or <AREA ...> tag).

Line 11 is the real kernel of the whole function -- this is where the popup is actually opened. window.open() takes three arguments. The first is the URL to open in the popup. In our script we use the mylink variable. The second is a unique name of the popup -- we use the windowname variable. The third argument is a string containing a comma separated list of properties of the window. These properties are explained in more detail starting at Popup Windows: open() Parameters.

In line 12 we return false to cancel the click on the link. If we don't return false the link will navigate the current window to the URL of the popup.

Finally, line 13 closes the popup() function, 14 closes the comment, and 15 closes the script.

The Link

Now let's take a look at the link that opens the popup.

<A 
 HREF="popupbasic.html" 
onClick="return popup(this, 'notes')">my popup</A>

Like regular link, the <A ...> tag has an HREF attribute that has a URL. In addition, our popup link has an onClick attribute. When the user clicks on the link the code in onClick is triggered.

The code begins with return. One of the properties of onClick is that if the code returns false the click event is cancelled. Remember how the script returns false at the end? That's where the false value comes into play. When the user clicks on the link, the code cancels the click and opens the popup its own way.

After return, the code calls the popup() function with two arguments. The first argument, this, indicates the link object itself. The script uses this object reference to get a URL for the popup. By passing an object reference instead of typing the URL twice we avoid the problems inherent with redundant information. If you change the URL or copy and paste the code for a different link, you only need to change the URL in one place. note that this should not be in quotes.

The second argument is a unique name for the popup. Every popup window must have its own unique name. Different links can target the same popup by all using the same name. note that the name should be in single quotes ('').

The Events

Let's walk through the events that go into opening a popup. When the user clicks on a link, the browser triggers the onClick event, running the code in the onClick attribute. Because the first word is return, the browser watches to see if a true or false value is returned. The command after return calls the popup() function, passing a reference to the link object and a string containing the unique name of the popup.

The script first checks if the browser understands the window.focus method (line 5).

If the browser doesn't have window.focus (which will happen in some older browsers) then the script returns true, which is in turn returned from the onClick event handler. Because onClick returns true the process of connecting to the URL continues as normal in the current window.

Most browsers will have window.focus , so the script continues. Starting in line 7 the script checks if the first argument (mylink) is a string or an object reference. This test gives the function flexibility by allowing us to call it from a link object or from the onLoad event of the <BODY ...> element. Either way the script gets a URL to point the popup to.

Next, the script actually opens the popup using the URL and the unique name. Finally, the script returns false. Back in the link, the false value cancels the click event -- which is no longer needed because the popup has been opened.

Under the Hood: The Popup From a Form Script >>>

Did you know Perry Marshall shows you how to double traffic in 30 minutes with AdWords?