JavaScript: Popup Windows

This how-to article about JavaScript popup windows shows you how to create a basic popup window, then shows you how to create several types of more complex popups. You will also get to play with demos and get source code and a reference list of options for popups.

Read this how-to article in Spanish language thanks to Maria Ramos from Webhostinghub.com.

JavaScript allows you to create (open) new windows. Run whatever HTML code you wish in these windows. You can even have actions in one window effect another window.

Example 1: Create a Basic Popup Window

Let’s learn how to open a new popup window. The code is straightforward. (It gets more complicated when you add different options, and when you navigate around multiple windows.)

Open Window Example 1

The code used to open basic popup for Example 1 is:

Looking at the code snippet above, you need to define the following (listed in the order they appear in the code snippet) for your own window:

1. specify the web page to load into the window
2. set the title of the window
3. specify the options for the window

How To Close Your Popup Window with Code

Now let’s close that window with code (not just killing the browser window). If you closed your popup window from above, Open Window Example 1 again.

Look towards the bottom of the window. There is a link to “Close this Window.”

Here is the code:

This was a really basic, simple example that created an ugly popup window. We focused on the mechanics here. There are lots of ways to make the window look better. At the bottom of this page is a reference of options available to you.

Example 2: Interacting With Two Windows

In this example we change which window currently has the focus. In other words, we use code to set which window is “on-top,” or highlighted.

To navigate among windows, give your popup window a name, or assign it a variable. To do this, just set the name (variable) you want, equal to the window.open statement.

The code looks like:

Let’s see it in action:

Click Here to Open Window Example 2

If you opened Window Example 2, and clicked the link at the bottom that says “Click Here to Change the Focus” then you should have returned to this page via the focus change. If you didn’t, what are you waiting for?

The line of code to change focus is:

We can even close Window Example 2 from this link. Use the following statement:

Example 3: Writing To a Popup Window From Another Window

You can open a window. Then, after it has been opened, you can write content into that window from your original window.

The best way to clarify is by trying it.

Click here to open Window Example 3

After the window opens, switch back to this page and now click here to write some text into our popup window.

You may have to switch back and forth between the windows to see that something was written into the popup window. Darn cool.

The statements used are:

Example 4: Using a Popup for Site Navigation

One possible use of a popup window is for site navigation. You can place links to different sections of a web site in a popup window. While navigating the site, the whole site links are always present.

I don’t recommend doing this because of usability issues. I like to present it because itoffers a nifty learning tool. It also might generate some better ideas of a good use of popup windows.

When using links in an opened window, you need to reference the ‘opener’ window to have links opened in that window. Do this by writing a function in the opened window which points links to the opener window. This is best shown with an example:

Click here for a Navigation Window Example 4

Here is the code:

Options for JavaScript Popups

We just worked with really simple looking popup windows. You have numerous options that let you control how they look. Here is a reference:

I hope you found this useful. Be sure to check out my other how-to articles and tutorials.