Pop up windows

A feature used in many websites is the provision of pop up windows. Pop up windows allow additional information to be appear in a separate window on the page.

This feature was experimented with on some of the pages when designing the MacRobertson's Round Australia Expedition online exhibition. Pop up windows can be useful for providing small amounts of additional information in a small window rather than linking to a full sized additional page on the topic however some browsers such as Internet Explorer on XP and versions of Mozilla Firefox can block the use of javascript or warn web page users that there is a pop up window each time the page is loaded. This becomes extemely annoying so it was decided not to use this feature on the site.

Pop up window example - provides an example of the use of a pop up window plus the code used to create it.

Some points to consider if planning to use pop up windows:

• Javascript is usually used to create the pop up window and to provide control over the size and design of the window although a basic effect can be created with html


• On the page containing the pop up window the script information can be added to the head section between script tags


• In the body of the page, additional code is added to the link code to enable the pop up window to appear


• Punctuation is important


• If pop up windows are to be used on a number of pages an external javascript page can be created and saved for example as popup.js - reference to the javascript page (src="popup.js") is made in the script tag section in the header


• Because not all browsers cope with pop up windows, html code is normally included in the javascript to produce a direct html link to the page containing the information if the pop up window is not going to work


• It is useful, in the pop up window, to include information about closing the window either as text or by using additional javascript to produce a close button

There are a number of pop up window tutorials available online. Below is a selection:

Popup windows - the basics
(includes explanation of each section of code)

How to make a pop-up window

The perfect pop-up

Popup windows