Introduction to Pop Up Windows

PopUp Windows

window.open()

This example

Demonstrates what you need to know to make JavaScript PopUp Windows.

You can create a PopUp Window using HTML and the TARGET attribute.

Horse Head Nebula in Orion

Click on this image for a DEMO of a PopUp Window using HTML
Close the PopUp Window with its close button in the upper right corner of the window

Here's the HTML:

<A HREF="horsehead_lg.jpg" TARGET="NEW"><img src="horsehead_sm.gif" border=0></A>

You have no control over the size and appearance of this PopUp window. It mimics the window that created it.

Using JavaScript it is possible to customize the PopUp window.

Horse Head Nebula in Orion

Click on this image for a DEMO of a PopUp Window using JavaScript

Here's the JavaScript code:

<A HREF="javascript:void(0)" onClick="window.open('horsehead_lg.jpg', 'MyPopUp', 'width=432,height=270,toolbar=0,scrollbars=0,screenX=200,screenY=200,left=200,top=200')"><img src="horsehead_sm.gif" border=0> </A>

Here's a description of the JavaScript code that created this window.

It starts with an anchor tag <A HREF= ... > since the pop up window is created when the thumbnail image, horsehead_sm.gif, is clicked.

The next item you see is "javascript:void(0)". This tells your browser to keep the window that it's already on and not to load a new one.

onClick tells your browser to execute the JavaScript that appears inside its quotes when the thumbnail is clicked. The JavaScript code is: "window.open('horsehead_lg.jpg', 'MyPopUp', 'width=432,height=270,toolbar=0,scrollbars=0,screenX=200,screenY=200,left=200,top=200')"

the syntax of the window.open() method is: window.open('URL', 'WindowName', 'Features')

URL is the file to be loaded into the PopUp Window.

WindowName is the TARGET name of the new window.

Features describe the appearance of the window.

toolbar determines whether a toolbar (includes the forward and back buttons) is displayed. Options are 1 (YES) or 0 (NO).

status determines whether a status line appears at the bottom of PopUp window. Options are 1 or 0.

scrollbars determines whether scrollbars appear on the PopUp window. Options are 1 or 0.

resize determines whether the PopUp window can be resized. Options are 1 or 0.

width sets the width in pixels of the PopUp window.

height sets the height in pixels of the PopUp window.

left and top are IE4-specific features. They specify the placement of the PopUp window in relation to the upper-left corner of the monitor.

screenX and screenY are Nav4-specific features. They specify the placement of the PopUp window in relation to the upper-left corner of the monitor. It's OK to place both the IE4 and Nav4 code in the same string without creating a JavaScript error.

You might want to add a close button to the JavaScript popup window. Here's an example.

Horse Head Nebula in Orion

Click on this image for a DEMO of a PopUp Window using JavaScript

Here's the JavaScript code:

<A HREF="javascript:void(0)" onClick="popup('horsehead_lg.jpg', 'width=432,height=325,toolbar=0,scrollbars=0,screenX=200,screenY=200,left=200,top=200')"><img src="horsehead_sm.gif" border=0> </A>

And this JavaScript code goes in the <HEAD> section of your document.

<SCRIPT LANGUAGE="JavaScript">

function popup(FILE, FEATURES) {
CONTENT = "<HTML><HEAD><TITLE>Horse Head</TITLE></HEAD>" + "<BODY><CENTER><FORM><INPUT TYPE='BUTTON' VALUE='Close'" + "onClick='window.close()'></FORM><P><IMG SRC='" + FILE + "' BORDER=0>" + "</CENTER>"+ "</BODY></HTML>";
pop = window.open("","",FEATURES);
pop.document.open();
pop.focus();
pop.document.write(CONTENT);
pop.document.close();

}

</SCRIPT>

That's it for PopUp windows. Now you can try out the online examples using PopUp windows.