Skip Navigation.

NWE Help: Web: Authoring: HTML: Tips: Pop Up

NWE Home :: Help :: Web :: Authoring :: HTML :: Tips

You can make pop up windows for your html documents using some simple javascript code. See an example.

First, copy the following code and paste it between the <HEAD> and </HEAD> tags (Note that the third line is very long. Make sure that when you paste it, the line is kept as one long line -- this is a single command and it cannot be broken).: 

<SCRIPT LANGUAGE="JavaScript">
function open_window(url) {
mywin = window.open(url,
        "Window_name",
        'width=200,height=155,top=0,left=0,toolbar=0,location=0,menubar=0,scrollbars=0,resizable=0');
}
</SCRIPT>

If you want the window that opens to be wider or longer in height, you can alter the script at the "width" and "height" sections. The larger the number, the larger the window will be.

To alter the placement of the pop up window, adjust the numbers in the "top" and "left" entries. These entries indicate a number of pixels away from the upper left corner of the screen. Thus, a pop up using the code above will appear in the upper left corner.

Next, find a word or image in the body of your web page that will be the link that activates the pop up window. For example, in the sentence:

I love wombats.

"wombat" could be a link that activates the pop up window to show a picture of a wombat. I place the following code around "wombat" just like I would for a hyperlink:

<A HREF="javascript:open_window('wombat.html')">wombat</A>

If you notice, the tag is similar to a hyperlink tag with the exception of the "javascript:open_window('URL')" part.

Don't forget, for the script to work, you need a separate image or page called "wombat.jpg" or whatever you choose to name the document.