Popup tutorial to create and close popups on your website!

Small Business Resources

Digital Winners Home > Small Biz Home > Tutorials > popups

Why do I want a popup?

There are lots of scripts available on the web that I could use, but I favor the simplicity of doing it myself. This article describes a simple method for creating and then closing a window using javascript. Techniques to control one window from another, changing content in the opened window, etc. are beyond the scope of this article.

Personally, I consider most popups rude and a real pain. That's why I usually set my browser to block them. There are several utilities out there that you can use to block them as well. They distract me from the content I came to the site to see. If you get flooded with popups whenever you load a particular page, what does that say about the site owner's opinion of their own content? I'll let you draw your own conclusions.

However, there are times when opening a popup window is an ideal tool for you and your web site. The best uses are for quick tidbits of information that you want to share with your visitors, where they won't have to leave your site, or web page, to see.

Here are just four examples of (what I consider) appropriate use:

1. To provide a "help" feature while they are filling out an online form on your site. You certainly don't want them leaving the form to figure out what to enter in the boxes.

2. To enable them to make option selections.

3. To provide an "About Us", privacy policy, etc. without having to leave your page.

4. To show a larger image of something on your web page.

Etiquette

First and foremost, never open another window that doesn't provide value to the content of your web site. This may seem obvious, but the majority of popups include ads for stuff that have nothing to do with the site you are visiting. Second, unless there is an awfully good reason to keep the popup open, close it immediately when your visitors go back to the main page. When your visitor clicks back in his main window, the "focus" is now in the main window. In other words, the popup window has lost focus, and it can (usually) be safely closed. Obviously, for "help" features, you will want to keep it open.

How do I do it?

It only takes a few lines of code, and you will be thrilled with how effective it can be. It also works with older versions of Netscape and IE browsers (version 4 and later).

Step 1: Create the content

You can use anything from a picture, text file or a standard web page. A text file is limited, because you won't be able to format the content (fonts, colors, etc). Pictures are good choices...especially if folks want to see a larger image of something on your site. A standard web page enables you to format the content just like any web page. Personally, I use web pages, even for my images. The web pages are very small (barely larger than the image itself). This allows me to include controls (see below) or to add additional content.

I also recommend you format your content so it can be displayed in a window no larger than about 400 pixels wide by 500 pixels high. Smaller is better. If you can squeeze it down to 300-350 wide, that is even better.

Step 2: Add controls

This is where you provide features to let your visitors close the popup manually, or have it close automatically when the focus goes back to the main page. If you don't want to add these controls, you can skip this step. Your users can still close it themselves manually using the standard window controls. But I think it's good practice to close them automatically.

To close automatically, when focus is lost, enter this in the <body> tag of your popup window content.

<body onBlur="window.close()">

onBlur is a javascript event that occurs when focus on a particular page is lost. This works great for html web pages, but won't work if you are opening a window with it's only contents being a graphic image. I recommend that even for graphic images, you include them on a very simple web page, that includes this code.

A second way, which you can use in combination with the onBlur technique, or by itself, is to give your users a button in the popup window or a text link Window Close.

The code for the button is:

<input type="button" value="Close Window" onClick="window.close()">

The code for the text link is:

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

Either one works well, but I prefer the button, since it makes it easy to see. If your window is small, then a text link is probably a better choice.

Step 3: Create the popup function

You need to create a javascript function to open the window. Then later, you can call the function from within your web page.

Place this text between the <head> and </head> tags of the page where you will want your visitors to activate the popup.

Let's look at this in detail.

"open_popup" is the name of the function. You will use that name later, to actually make it execute. You can use any name you want, but I like to use descriptive terms that make the function clear.

(page) is a parameter that will be passed to this function when you call it later.

The window open statement takes the form "window.open(page, name [, features])"

Notice that within the parentheses, each element is enclosed in single quotes (')

"page" is the parameter that will be passed, and will be the url of the contents you created in step 1. It is not enclosed in quotes, because it is not a string, but a variable, who's contents will the url you identify later.

"name" is a text name that you assign to the window. In our case, we name our popup "PopupWindow." This article won't discuss manipulating the popup. But to do so, you would use the name to refer to the popup window.

"features" are all optional, and there is a long list of ones you can use. The most common ones that you will want to use are:

width and height are both measured in pixels.
resizable (yes/no) allows resizing the popup window.
statusbar (yes/no) displays a standard menu bar (File, Edit, View, etc.)
scrollbars (yes/no) displays standard horizontal and vertical scrollbars.

4. Call the function and open the popup

OK, now that we have the basic function defined, it's time to trigger the popup.

Add the following within the body of your web page.

<a href="url of your popup content" onclick="return open_popup('url of your popup content')">Open Window</a>

The first url is there in case folks have javascript disabled, they will have a link that they can click on anyway. The second url is where your specify the url parameter will be passed to the open_popup functiion.

That's it!

The advantage of this technique is that you can use different popup content throughout your web pages, but will be calling the same function to open each one. The only thing you need to change will be the url of your chosen content.

Copyright � Dick Sowa 2003. All Rights Reserved

About the Author:
Dick Sowa is a retired Professional Engineer and senior manager with the Federal Govt, and is a Partner and Webmaster for Digital Winners, which specializes in services for small businesses and online shopping.