JavaScript Pop-Up Window

Sometimes you may stumble across the need for a "pop-up" window. Perhaps it is used to display some help information, perhaps to display an address or contact information, or to display an image of an employee or a map displaying directions to a certain business location. Whatever the need, a Pop-Up Window can be easily created by calling a JavaScript function when the user clicks on a hypertext link.

The resources in the document are divided into the following sections:

A working example
The JavaScript source code
How to access the JavaScript with your document

Pop-Up Window Example

The JavaScript Scriptorium main index page includes an example of a Pop-Up Window. It is shown below for your convenience. You can view the source of this document to get a better feel for how the JavaScript is called from within the Document Body.

Why is the list of JavaScript examples so sparse?

You'll note that the JavaScript events, "OnMouseOver" and "onMouseOut", are also handled in this example.

The Source Code

The JavaScript source code for the Pop-Up Window is included below:

<script>
<!--
  function openWindow(url, w, h) {
    var options = "width=" + w + ",height=" + h + ",";
    options += "resizable=yes,scrollbars=yes,status=yes,";
    options += "menubar=no,toolbar=no,location=no,directories=no";
    var newWin = window.open(url, 'newWin', options);
    newWin.focus();
  }
//-->
</script>

To use this script you will need to include it in the HEAD portion of your document, i.e. between the HEAD tags - <HEAD> ... </HEAD>. The title tag <TITLE> is also located in the HEAD portion of your web documents.

Document Usage

The generic HTML code needed to utilize the Pop-Up Window JavaScript Source Code is included below:

<a onMouseOver="status='MESSAGE'; return true"
   onMouseOut="status=''; return true"
   onClick="openWindow('URL', WIDTH, HEIGHT); return false"
   href="URL">IMAGE or TEXT</a>

You will need to substitute appropriate content for the MESSAGE, URL, WIDTH, HEIGHT, and IMAGE or TEXT tags.