Popup Windows

Back to Index

JavaScript Examples
Changing Background Colours
Mortgage Calculator
Carbon Dating Calculator
Let The Banners Fly!
Online Quiz
Days to the Millenium
A Simple MouseOver (Rollover) Script

PopUp Windows

Creating and Controlling PopUp windows with JavaScript

Example One:
This is achieved using JavaScript's onBlur event handler. The second window contains this change to its body tag:
<BODY onBlur="window.close()">

Simplified Version:
In this siplified version all the action takes place via the Javascript in the link itself. In this case there is no need for a script in the head of the document.
This is what the link looks like:
<a href="javascript:void window.open('onblur.htm','picture','height=200,width=300').focus()">

onblur.htm is the file you wish to open in the popup window
you can add extras to the window by inserting scrollbars,menubar,resizable in with the height and width attributes. A comma goes between each of them.

Example Two:

<BODY onLoad="timer=setTimeout('closeMe()',5000)">

Example Three:

<BODY onLoad="window.setTimeout('getSecs()',1)">

In each of the examples above, a new window is opened when the link is clicked on.
Inside each tag for a link a JavaScript event handler is added:

<A HREF="javascript:onClick=(popLink('onblur.htm'))"> Example One: </a>

a more common link is:
<a href="#" onClick="(popLink('onblur.htm'))"> Example One:
But it has a drawback in that the page will scroll to the top at each click

<A HREF="javascript:onClick=(popLink('onblur.htm'))">
Whichever one you choose to use activates the JavaScript in the HEAD of this document:

<script language="javascript">
function popLink(Link){
popup = window.open(Link, "newwin","height=200,width=300,scrollbars=no")
}
</script>

It's in this script that you designate which document appears in the new window as well as set the size of the window and determine whether there are scroll bars etc. Any number of these links can exist on a page, each triggering a different window to open.

Many thanks to Ian Cowell for help with the JavaScript in this page.