Creating a Descriptive Popup Window

Designing the Popup Window

To create a popup window place the following script in the <head> section of the page that opens the popup window:

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>

The window.open( ) command specifies how the popup window should appear. To add any of the following properties to a popup window use the corresponding command.

Properties in the open( ) command are separated by commas and there should be no spaces in the list of properties. The entire list of properties goes inside quotes. Width & height are the only required properties of a popup window except in full screen mode. All other properties are optional. If left & top is not set, the browser puts the popup where it wants. Width, height, left, and top are measured in pixels. It is usually a good idea to set the popup with scroll bars so that all contents of the popup window can be viewed. A dependent popup window closes when its opener window closes; however, the "dependent=yes" concept only works in Netscape. "Type=fullWindow" opens a full screen popup in Netscape; whereas, "fullscreen" opens a full screen popup in MSIE.

Calling the Popup Window

To link to the popup window pace the following command in the <body> of the page that opens the popup window:

<A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A>

The 'notes' argument is the name of the popup window. Every popup window should have its own unique name. There should be no spaces in the page name between the single quotes. For example, the following command will open a popup with the file name of "demopopup.html" and a window name of 'demo':

<A HREF="/files/webmasters-corner/demopopup.html" onClick="return popup(this, 'demo')">
Click here to see a demo popup </A>

Click here to see a demo popup

Additional Information

Listed below are some key definitions that arise when working with popup windows.

Toolbar
The toolbar in a web browser consists of a series of buttons, such as back, forward, stop, refresh, and home buttons which allow the user to perform functions quickly using the mouse.
Scroll bar
The scroll bar is a bar across the bottom of a window or along the right-hand side of a window. By either clicking on the up or down arrow or anywhere along the scrollbar, users can gain access to information that is not within view.
Location bar
The location bar is where the URL or site address is displayed at the top of the window.
Directories
A row across the top of the window with links to popular websites.
Status bar
The status bar is where the browser displays messages for the user. Most browsers display the URL of a link when the mouse passes over the link.
Menu bar
A menu bar appears at the top of a window and includes the file, edit, view, favorites, tools, and help menus which allow the user to perform functions quickly using the mouse.
Pixels
Pixels are individual tiny dots of light which display colors, images and text on a screen. Most images and font sizes used in websites are measured in pixels.
MSIE
Microsoft Internet Explorer

For more indepth information on popup windows visit the HTML Code Tutorial website. For another example of a popup window, visit the Thunder Bay Community Bingo website and click on the "Thunder Bay Society of Ballet & Dance" link.

Article by Nadine Simmons
©2005 Vimar Computer Services Inc. This article may not be duplicated without permission.

(0 Questions, 0 New) - Log in if you would like to ask a question about this topic.

Forum  -  About Us  -  Trade Links