MIT 4.202 Geometric Modeling Fall 2003
Making a Popup Window in HTML
prepared by: Haldane Liew
version: 2003.11.14

Making a new window pop up in html is relatively simple. But it can get a bit more complicated if you want refined control over how that new window looks. There are 2 basic methods to creating a new pop up window.

Method #1: Changing the target of the link

Normally, you create a link in html by using the <a> tag with the href option such as below...

<a href="http://cat2.mit.edu/4.297">4.297 Link in this window</a>

4.297 Link in this window

To make this link appear in a new browser window, simple add the target option and set it to _blank such as below...

<a href="http://cat2.mit.edu/4.297" target="_blank">4.297 Link in a new window</a>

4.297 Link in a new window

To make an image appear instead of a html page simply replace the link with the name of the picture.

 

Method #2: Using Javascript

Sometimes you want a new window but you want to control what features are available to the user in the new browser window. For example, you may want to adjust the size of the browser to frame a picture. To do this, you need to learn a little bit of Javascript which is a programming language for html. In javascript, you can create a new window using the function window.open. This function comes with numerous options that control the appearance of the new window.

To create a link using window.open, try the following...

<a href="#" onClick="window.open('hs1.gif','a_window');return false;">Hagia Sophia Rendering Window #1</a>

Hagia Sophia Rendering Window #1

A brief explanation of the html code.

I hope that wasn't too confusing to follow. What is missing in the previous example is the ability to control the appearance of the new window; this is controlled with the third parameter. The following example creates a new browser window that is 420x334 pixels without anything else (very much like those advertisement pop ups).

<a href="#" onClick="window.open('hs1.gif','picture_window','width=420,height=334');return false;">Hagia Sophia Rendering 420x334 Window #2</a>

Hagia Sophia Rendering 420x334 Window #2

When typing in the third parameter, make sure there are no spaces or returns. To place another image in the same window, just make sure the window name is the same (the second parameter).

<a href="#" onClick="window.open('hs2.gif','picture_window');return false;">Hagia Sophia Rendering 420x334 Window #3</a>

Hagia Sophia Rendering 420x334 Window #3

Notice there's no need to restate the third parameter because the window already exists.

If we wanted to add only a toolbar to the window and make it resizable, we would insert those options into the third parameter.

<a href="#" onClick="window.open('hs3.gif','another_window','toolbar,resizable');return false;">Hagia Sophia Rendering Window #4</a>

Hagia Sophia Rendering Window #4

The following example opens a new window that has practically everything except the toolbar.

<a href="#" onClick="window.open('http://cat2.mit.edu','yet_another_window',
'location,menubar,resizable,scrollbars,status'); return false;">4.297 Link in a new window without a toolbar</a>

4.297 Link in a new window without a toolbar

A brief explanation of the most common parameters is given on Webmonkey. For a complete list of options that are available look in Dreamweavers reference section under O'Reilly Javascript Reference, object=window, method=open.

 

I think that's enough for now. If you have questions, you know where to find me...

haldane