Altering Popup Window Behavior

There are plain popups. And there are popups with altered behavior.

Today you will learn how to make popup windows. And you will learn how to make your popups:

Stay on top of any other browser windows, even if the user clicks on another window.
Close automatically when the user clicks on another window.
Close automatically after 12 seconds have elapsed (or other time interval you specify).

The popups can be closed manually with either a link or a form button, if you decide to provide that functionality.

You will also find out how to launch your popup with either a link, a form button, or when your page loads.

Two kinds of pages are required to make a popup window; (i) the regular page from which the popup launches and (ii) the page that will appear inside the popup window. Both kinds of pages are regular HTML files that you put on your server just like usual.

This article shows you how to make popup windows with three different types of behaviors, which requires three HTML files. However, all three popups can be launched from one regular page.

Not all browsers are JavaScript compatible, and some browser's compatibility is partial. However, the code presented here should work find with the latest versions of popular browsers.

The Regular Page

The first thing to do is make the regular page:

Create a blank HTML page.
In the HEAD area of your page (between the <head> and </head> tags), put the following five lines of JavaScript code --
```
<script type="text/javascript" language="JavaScript">

</script>
```
Notice the height and width numbers. Those designate the size of the popup window in number of pixels. You may change them.

The function name in the above JavaScript code is PopUp(), with "url" in the parenthesis. That variable name url will know and use the URL you specify when you launch your popup.
In the BODY area of your page (between the <body...> and </body> tags), you can put either or both of the following popup launching code --
1. An anchor tag link. This can be a text or image link. This following code demonstrates a text link.
```
<a href="javascript:PopUp('____________')">
Make Popup
</a>
```
  "Make Popup" may be changed to your custom text. Or, it may be replaced with an image.
2. A form button launcher.
```
<form>
<input 
type="button" 
onClick="PopUp('____________')" 
value="Make Popup">
</form>
```
  The "Make Popup" button text may be changed.
Repeat I. and II. above, three times. That will give you a one set for each of the three popup windows this article shows you how to do.

Save this regular page that you created. A little later on, you will be replace the ____________'s with the URL of the popup window pages you are launching.

The Popup Window Page

Now, the next thing to do is to create an HTML file to display in your popup. We'll make a file for a plain popup window. Then we'll give it some behavior.

Create an HTML file for a plain popup window page that can be closed manually with either a link or a button.

<html>
<body>
<a href="javascript:self.close()">
click here
</a>
<form>
<input 
type="button"
onClick="self.close()"
value="click here">
</form>
</body>
</html>

The two instances of "click here" may be changed to reflect your preferred wording. If you prefer a graphic instead of the text link, that is perfectly acceptable.

Save this file for later use. You will be making copies and changing them to provide different behavioral characteristics.

The <body...> tag of the plain popup window page is the key to giving it behavior. And the first behavioral characteristic we'll provide is make it stay as the top browser window until manually closed.

The First Behavioral Characteristic

Make a copy of the plain popup window page you made and save it with file name first.html

Now, put the following line into the body tag:

onBlur="self.focus()"

The onBlur JavaScript event code tells the browser what to do if the window tries to lose focus, which it does if the user minimizes the popup window or clicks on another window. In our example, the browser will bring the focus back to the popup window.

So long as the focus is on the popup window, it will remain the top browser window.

Something that could happen in the course of your page being viewed, especially if the popup window is loading a large page, is that the popup window will lose focus before it completes loading. In that case, the onBlur code would never be triggered.

To handle that eventuality, also put the following line into the body tag:

onLoad="self.focus()"

The onLoad JavaScript event code tells the browser what to do as soon as the page has finished loading. In our example, the browser will bring the focus to the popup window. Once loaded and in focus, the onBlur code then can do its job.

So, the popup window page now looks like this:

<html>
<body onBlur="self.focus()" onLoad="self.focus()">
<a href="javascript:self.close()">
click here</a>
<form>
<input 
type="button"
onClick="self.close()"
value="click here">
</form>
</body>
</html>

Save the file as first.html

Now go to the regular page you created earlier and replace the ____________ of one link/button set with: first.html

The set will look something like this:

<a href="javascript:PopUp('first.html')">
Make Popup</a>
<form>
<input 
type="button"
onClick="PopUp('first.html')"
value="Make Popup">
</form>

Save the regular page and try it out. When you click the link, the popup should appear with the behavior you gave it.

The Second Behavioral Characteristic

This time, we'll remove the "must stay in focus" compulsion and replace it with a behavior that causes the popup window to close automatically if it is minimized or if the user clicks on another window.

Make a copy of the plain popup window page and save it with file name second.html

Put the following line into the body tag:

onBlur="self.close()"

The onBlur JavaScript event code tells the browser to close the window if it loses focus.

You may also want to add the

onLoad="self.focus()"

to the body tag to make sure the popup window has focus at the moment it completes loading.

Save the file as: second.html

Now go to the regular page you created earlier and replace the ____________'s of another link/button set with: second.html

Save the regular page and try it out.

The Third Behavioral Characteristic

This time, we'll give it a behavior that causes it to close itself automatically after 12 seconds (or any other elapsed time you prefer).

Make a copy of the plain popup window page and save it with file name third.html

Put the following line into the body tag:

onLoad="setTimeout('self.close()',12000)"

The onLoad JavaScript event code tells the browser to close the window 12000 milliseconds after the page has completed loading. You may change the 12000 to your preferred time period; if you want a full minute, change it to 60000.

Because the onLoad event code is already in use, it can not be used to ensure the window is in focus when it finishes loading. There are ways around it, but it would require coding beyond the scope of this article.

Save the file as: third.html

Now go to the regular page you created earlier and replace the ____________'s of another link/button set with: second.html

Save the regular page and try it out.

Instant Popup

If you want your regular page to launch a popup as soon as it has finished loading, add the following to the regular page's <body...> tag:

onLoad="PopUp('second.html')"

Just replace second.html with the URL of the page you want to appear in the popup window.

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Altering Popup Window Behavior

Support This Website

More "Web Page and Site Features" Articles

Other Recent Articles from the Library