Making Popups

A popup window is really just a page like any other. You put the content of the popup into an HTML file, just as you would for a normal Web page, and you can link to the popup window anywhere on your site. However, instead of specifying the path to the page as you would for a normal link:

 <a href="popup.htm">Open the popup window</a> 

you direct the browser to a simple JavaScript function instead:

 <a href="javascript:doPopup('popup.htm');">Open the popup window</a> 

This function instructs the browser to open the page in its own window instead of loading the page in the main window. You can write your own JavaScript to do the job, or you can use this one:

 <script language="JavaScript">   function doPopup(popupPath) {     window.open(popupPath,'name',       'width=400,height=200,scrollbars=YES');   } </script> 

That's all there is to it. The window.open statement takes care of everything, as long as you send the function the correct path. So, if your popup window's HTML file is in a different directory than the calling page, you'd format your link something like this:

 <a href="javascript:doPopup('../help/info.htm');">Get help</a> 

or whatever the correct path might be. Insert the path between the single quotes. If you pass the wrong path to the function, your popup window will load with unexpected content or the famous File Not Found page.

The JavaScript language gives you plenty of control over the size and behavior of the new window. You can give the popup a unique name, which appears right after the path in the window.open statement. Replace the word name in the previous script with popup, help, window, Charlie, or whatever you like.

After the name comes the properties list, where you define the appearance of the popup window. You can string together as many properties as you wantjust separate each with a comma, and don't add a space after the comma. Table 9.1 shows some common options.

Table 9.1. Common Popup Window Properties

PROPERTY	DESCRIPTION	EXAMPLE
height	Gives the height of the popup window in pixels	height=300
location	Gives the popup window a location field	location=YES
menubar	Gives the popup window a menu bar	menubar=YES
resizable	Allows the visitor to drag the size and shape of the popup window	resizable=YES
scrollbars	Gives the popup window horizontal or vertical scrollbars as needed	scrollbars=YES
status	Gives the popup window a status bar	status=YES
toolbar	Gives the popup window a toolbar	toolbar=YES
width	Gives the width of the popup window in pixels	width=150

So, if you want to add a location field and a status bar to the popup window in the doPopup() function, you simply expand on the set of properties, like this:

 <script language="JavaScript">   function doPopup(popupPath) {     window.open(popupPath,'name',       'width=300,height=150,scrollbars=YES,location=YES,status=YES');   } </script> 

Figure 9.3 shows the various parts of the browser window, in case you need a refresher.

Figure 9.3. Here are the parts of a browser window: (A) Location field, (B) Menu bar, (C) Toolbar, (D) Scrollbar, (E) Status bar.

TIP

If your site uses different kinds of popups, you probably want to give each type a different name and a different set of properties. To set this up, modify the popup window's link like so (substituting actual values for the placeholders):

 <a href="javascript:doPopup('path','name','properties');"> 

As you can see, this code sends three values to the doPopup function, not just one. Now, to use these values, just make a few changes to the JavaScript:

 function doPopup(popupPath, popupName, popupProperties) {   window.open(popupPath,popupName,popupProperties); } 

Bringing the Popup to the Front

One problem with popup windows is that they tend to sink. They wind up at the bottom of the desktop, along with a small collection of advertisements, hidden under the main browser window. If your site loads another page into the open popup windowa common occurrence when you use a popup to display help tipsthe sunken popup window doesn't bob back to the top unless you specifically instruct it.

To do this, add the onLoad event to the body tag of the popup window's HTML file:

 <body onLoad="window.focus();"> 

The window.focus statement ensures that the popup window gets the top position on the desktop, but only when the page loads. The popup sinks again as soon as your visitor clicks in the main browser window.

If you really want to annoy your visitors and prevent the popup from sinkingevertry this:

 <body onBlur="window.focus();"> 

The onBlur event fires whenever the popup window loses its top position, and then the window.focus statement brings the popup back to the front. The only way to get rid of a popup window like this is to close it.

TIP

Never, never, never use unsinkable popups in your design. Your popup window may be tougher than the Titanic, but your site will sink like a stone.

Adding a Close Link

A simple JavaScript trick allows you to add a Close link to the body of your popup, as you saw in Figure 9.2. When your visitors click this link, the popup window closes, saving them the trouble of using the X button along the top of the window.

The code for the link looks like this:

 <a href="javascript:window.close();">Close</a> 

You don't even have to create a special function for this job. A single window.close statement is all you need.