Learn...

FrontPage Intro

FrontPage Editing Basics

Make a FrontPage Template

FrontPage FAQ

Dynamic Web Templates (FP)

Swish Basics

Articles

Product-Specific

Pop-up Windows

Here is an example of a pop-up window: Click here!

Note that this is slightly different from creating a link that opens a new window, as in this case (you won't be able to close the pop-up window with the link). The first example has a width and height defined. With the second example, there isn't any way to control how big the window is going to be.

The second example is easy to do in FrontPage: When creating your link, have it open into a new window.

1. Highlight the word you want to make into a hyperlink and go to Insert | Hyperlink (or Ctrl-K).

2. Type in the URL.

3. Under Optional, you'll see Target Frame. Click on the button and select New Window.

Sometimes you will want to have control over the size of the pop-up window, and even what features of the window will show up: Do you want the window to be resizable? Have scrollbars if necessary? You can control all this with JavaScript.

This is not meant to be a thorough explanation of JavaScript and the document object model, but this tutorial should explain enough so that you can create pop-up windows easily and comfortably!

Here is the code for a JavaScript pop-up window link:

<A HREF="newWindowURL" onClick="window.open('newWindowURL','nameOfWindow','width=xxx,height=xxx,menubar,status,scrollbars,resizable,toolbar,location,directories');return false">Pop-up Window Link</A>

If we take that code and substitute:

newWindowURL = popup_ex.htm (the URL of our pop-up window)
nameOfWindow = popup (more about this later)
width = 200 (pixels)
height = 200 (pixels)

This is what you get: Pop-up Window Link

Paste this code into your HTML and after reading the information below, you can change the code to suit your needs!

An explanation of the code:

'newWindowURL'
The URL of the page to be loaded into the new window. This will only work for people who don't have JavaScript-enabled browsers.

onClick=" ... "
This tells the browser to do something when the link is clicked.

window.open( ... );
This is a JavaScript program function. It tells the browser to open a new window. The things that come inside the parenthesis must be in this order, separated by commas:

1. 'newWindowURL'
   The URL of the page to be loaded into the new window.
2. 'nameOfWindow'
   The identifying "name" of the window (this only matters if you want to create a link to close the new window. If you don't the window to have a name, you can always call it '_blank').
3. 'width= ... '
   Window properties - also separated by commas. You may omit the ones you don't need. Our first example of a pop-up window only defined the width and height and nothing else.
   • width=xxx The width of the new window in pixels.
   • height=xxx The height of the new window in pixels.
   • menubar If you include this, the window's menu bar will display (File, Edit, etc.)
   • status If you include this, the window's status bar (at the bottom of the window) will display.
   • scrollbars If you include this, the window will have scrollbars if necessary.
   • resizable If you include this, the window may be resized by the user.
   • toolbar If you include this, the browser's toolbar will be displayed.
   • location If you include this, the text area where you can type in URLs will be displayed.
   • directories If you include this, Netscape's directories ("What's new," "What's cool," etc.) will be displayed.

return false;
This piece of code will keep you from loading the "newWindowURL" into the main window.

Try it! This should be all you need to make pop-up windows.

Making a link to close your pop-up window:

You may wish to create a link to close your pop-up window (our example has one). Here's the code:

<A HREF="oldWindowURL" onClick="window.close('nameOfWindow');return false;">Close this window</A>

This is where the "nameOfWindow" variable becomes important. When you are making your link to create a pop-up window, keep track of what you name the window. Then use that same name in your close-window-link.

An explanation of the code:

<A HREF="oldWindowURL" ...></A>
Put a link to your previous page here. This should not affect anything if the user has JavaScript turned on.

onClick=" ..."
Same as before.

window.close('nameOfWindow');
Tells the browser to close the window named "nameOfWindow."

return false;
Same as before.