javascript tutorials

Opening a new window

Pop up windows explained
Sometimes you will want to create a link that opens in a new, smaller window. This provides more information to the guest, without taking them away from the currently viewed page. Using JavaScript, you can control the appearance and behavior of your new window.

To Create a new window link -

  • Create your link:
    • <a href="javascript:newWindow('http://www.google.com');">Open New Window</a>
  • Place this code on the head of your document:

Your link calls the fucntion newWindow (hightlighted in red.) The window.open command defines its parameters (details) in paretheses. There are three parameters contained in double quotes:

  1. url - this is a url of your choosing to populate the new window. This can be a web page or an image.
  2. Your new window needs to have a name, so we will name it 'urlWin'.
  3. The window's parameters - toolbar=yes, location=yes, scrollbars=yes, width=400, height=300. What do these mean? A handy window map is included below.

Example Browser Window -

What do the parameter names mean? The image below illustrates what each parameter correspond to the browser window elements. Click the parameter names to see the location os each element.

← Location
← Toolbar →
← Status
Scrollbar
→
Resizable
↓

More about pop ups:
» A List Apart - Accessible Pop-up Links

Tutorials