Popup Basics
We receive many emails with questions relating
to popup windows.
This article, rather than focusing on specialized uses,
attempts to provide a basic understanding of how popups
work.
Here is the basic JavaScript popup window code:
window.open(URL,Name,Properties)
"URL" is the URL of the HTML file with the content to be
displayed in the popup window.
"Name" is a name you give to the popup window if you want
to reference the popup in <form...> or <a...target="Name">
tags. If you will not reference the window, then Name can be
a null string. (A null string is a pair of apostrophes or a
pair of quotation marks with nothing between them; i.e., ''
or "") Because referencing is beyond the scope of this
article, the Name will be specified as a null string in
all working examples of this article.
"Properties" is optional, yet is the focus of at least half
of this article. Properties lets you control the appearance
of the popup window, such as its size and whether or not it
may have scrollbars. (If no optional Properties are
specified, you get a new browser window instead of a popup
window.)
Before describing the optional Properties, let's talk about
how to launch a popup window. After all, there is no sense
in describing the available options if you don't know how
to launch the popup in the first place.
Launching Popup Windows
To launch popup windows, put your JavaScript popup window
creation function into the HEAD area of your HTML page. Then
launch the popup with either the onLoad=... command in the
<body... tag or with an <a... anchor tag.
Here is a basic custom function for your HEAD tag:
<script type="text/javascript" language="JavaScript">
<!--
function Popup() {
window.open(...);
}
//-->
</script>
(The ... in the above custom function is a placeholder
for the URL, Name, and optional Features. Working code
replacing the ... is later in this article.)
To launch the popup with the onLoad= command, put this
into your <body... tag:
onLoad="Popup()"
To launch the popup with an <a... tag, do something like
this:
<a href="javascript:Popup()">
Click Here
</a>
Note that the custom function name does not have to be
"Popup" but can be any sequence of alphanumeric characters,
including underscore.
There is another method using the <a... anchor tag, a method
that allows you to dispense with the custom function in the
HEAD area. The reason you can dispense with the custom
function is because the JavaScript window.open(...)
function is in the <a... tag itself. Here is an example:
<a href="#" onClick="window.open(...); return false;">
Click Here
</a>
(Again, the ... in the above code is a placeholder for the
URL, Name, and optional Features.)
The reason for the "return false;" code is so the browser
won't try to load the URL "#" in the href attribute. The
URL "#' means go to the label on the page named following
the "#" character. Without a name following the "#"
character, the browser would normally go to the top of
the page.
Okay, you know several different ways to launch a popup
window. Now, let's replace the ... in the window.open(...)
function with working code.
The following assumes you have an HTML page that will be
displayed in the popup window called display.html:
window.open('display.html','');
Because no optional Properties are specified, the above code
will open a new browser window with your display.html in it.
When any optional Properties are specified, a popup window
with display.html is launched instead.
The Optional Properties
The optional Properties can be used to specify your popup
window's size, whether or not it will have a menu bar, and
so forth.
The Properties are all on one line and separated with a
comma. There may be no spaces in the line. The list of
Properties is enclosed between apostrophes or quotation
marks.
For example,
window.open('display.html','','height=100,width=200');
will display your page in a popup 100 pixels high and 200
pixels wide.
Here is a list of Properties you may assign to your popup
windows:
- height --
- If used, specify the popup window's height in
pixels. No less than 100 will be allowed. If not
used, the browser will determine a default height,
which may be the height of the screen.
- width --
- If used, specify the popup window's width in
pixels. No less than 100 will be allowed. If not
used, the browser will determine a default width,
which may be the width of the screen.
- menubar --
- menubar represents the browser window's menu bar.
The menu bar contains the browser's menus such as
File, Edit, and View. If menubar is used, specify
either menubar=no or menubar=yes. If not used,
menubar=no is assumed.
- toolbar --
- toolbar represents the browser window's toolbar.
The toolbar contains the browser's navigation
buttons such as Back, Forward, Reload, and Home.
If toolbar is used, specify either toolbar=no or
toolbar=yes. If not used, toolbar=no is assumed.
- locationbar --
- locationbar represents the browser window's
location bar, the bookmark and URL areas. If
locationbar is used, specify either locationbar=no
or locationbar=yes. If not used, locationbar=no is
assumed.
- personalbar --
- personalbar represents the browser window's
personal bar, if it has one, probably a region for
easy access to special bookmarks. If personalbar
is used, specify either personalbar=no or
personalbar=yes. If not used, personalbar=no is
assumed.
- directories --
- directories represents the same thing as
personalbar, above. If directories is used,
specify either directories=no or directories=yes.
If not used, directories=no is assumed.
(If both personalbar and directories are used, and
if their directions conflict, the browser will
determine how to handle it. Different browsers may
handle that situation quite differently. Never use
both personalbar and directories.)
- statusbar --
- statusbar represents the browser window's status
bar, the area containing the security indicator
and status bar messages. If statusbar is used,
specify either statusbar=no or statusbar=yes. If
not used, statusbar=no is assumed.
- scrollbars --
- scrollbars represents the browser window's
vertical and horizontal scroll bars. Most browsers
will display the scrollbars only when needed to
view content beyond the window area. If scrollbars
is used, specify either scrollbars=no or
scrollbars=yes. If not used, scrollbars=no is
assumed.
- resizable --
- resizable specifies whether or not the user may
resize the popup window. If toolbar is used,
specify either resizable=no or resizable=yes. If
not used, resizable=no is assumed.
Which of the above Properties you should specify is
determined by the purpose of your popup window.
For example, if your credit card authorization service
requires order forms to be on one domain, yet you want to
sell product from another, you could have your form on the
required domain and display it in a popup window. In this
case, you might not want the URL to be viewable in the
address bar, so you would specify location=no. But the other
Properties could all be ______=yes, except the height and
width. If you do not specify height or width, the browser
will display its default size which, in this scenario,
would probably be appropriate.
With JavaScript version 1.2, additional Properties may be
specified. Note that only the latest browser versions
support JavaScript 1.2. The additional properties are:
- screenX --
- screenX specifies how many pixels the left edge of
the popup window shall be in from the left edge of
the current browser window.
- screenY --
- screenY specifies how many pixels the top edge of
the popup window shall be down from the top edge
of the current browser window.
- innerHeight --
- innerHeight specifies the number of pixels high
that the inside viewable area of the popup window
shall be. This would replace the height="___"
Property of previous JavaScript versions.
- innerWidth --
- innerWidth specifies the number of pixels wide
that the inside viewable area of the popup window
shall be. This would replace the width="___"
Property of previous JavaScript versions.
- outerHeight --
- outerHeight specifies the number of pixels high
that the outside dimension of the popup window
shall be.
- outerWidth --
- outerWidth specifies the number of pixels wide
that the outside dimension of the popup window
shall be.
- dependent --
- dependent specifies whether or not the popup
window closes automatically when the main browser
window is closed. If dependent is used, specify
either dependent=no or dependent=yes. If not used,
dependent=no is assumed.
Assigning Popup Window to a Variable
Assigning the popup window to a variable can give you some
additional control:
MyWindow = window.open(...);
If you launch only one popup window from your page, then
assigning it to a variable is rarely necessary. But it
doesn't hurt to do so.
If you launch more than one popup window from your page,
you'll probably want to assign each to a different variable:
Pop1 = window.open(...);
Pop2 = window.open(...);
If both popup windows were assigned to the same variable
name (or no variable is assign) then the second and
subsequent popups will use the same popup window as the
first. Of course, in some situations that behavior may be
desired.
Assigning the popup to a variable will also allow you to
close the popup from the page that created it:
Pop1 = window.open(...);
setTimeout("Pop1.close",9000);
The above code creates a popup window and assigns it to the
variable Pop1. Then the JavaScript function setTimeout() is
set to close the popup window after 9 seconds (9000
milliseconds).
Those are popup window basics. It should be all you need
to make simple popup windows.
Additional information and specialized applications can be
found at the URLs mentioned above. The home of JavaScript,
Netscape.com, has information for those developing
with JavaScript. JavaScript download sites such as
http://javascript.internet.com/ have code snippets
that much can be learned from.
Much can be done with popup windows.
Will Bontrager
©2001 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
