JavaScript: Popup Windows

This how-to article about JavaScript popup windows shows you how to create a basic popup window as well as several more complex popups and includes demos and source code plus a reference list of options for popups.

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
The code to open a new window is straightforward. It gets more complicated when you add different options, and when you navigate around multiple windows.

Open Window 1

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

In the above example, the syntax is to first specify the web page to load into the window. Next, set the title of the window. Last, specify the options for the window. Note: the options are all in a single set of quotes.

This example also demonstrates how to create a link that closes the popup. Open Window 1 again in case you missed this. The code to close the popup is:

Options for JavaScript Popups

Example 2: Interacting With Two Windows
An important way to navigate among windows is to give the window a name, or assign it a variable. To do this, just set the name (variable) you want, equal to the window.open statement. For example:

Click Here to Open Window 2. The contents of the popup window provide more explanation.

If you opened Window 2, and read it, 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 2 from this link using the following statement:

Example 3: Writing To a Popup Window After It Is Open
You can open a window without first specifying HTML to load into it. Then you can write out HTML directly to that window. Click here to open Window 3. Once the window opens, switch back to this page and now write to Window 3. You may have to switch back and forth between the windows to see that something was written into the popup window.

The statements used are:

Example 4: Using a Popup for Site Navigation
One potential use of a separate popup window is as 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.

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