|
 POPUP
This is a short tutorial on creating links that open popup
windows.
A popup window is a web browser window that is smaller than
standard windows and (optionally) without some of the standard features such as
tool bars or status bars. For example, this
link opens a medium-sized popup window. Popup windows (aka popups)
are popular for small sidebar-style pages that are digressions
from the main page.
The technique described here addresses all the major issues in
popups. The popup always comes to the front. Different links can
target the same popup. The code is simple and easily modified.
The window.open part of the script has properties that control how
the popup will look. They are as follows:
| width & height |
the dimensions of the popup in pixels |
| left & top |
the distance from the top and left side of
the screen in pixels |
| toolbar |
if the popup should have a set of
navigation buttons across the top |
| location |
if the popup should have a location bar
where the URL is displayed |
| directories |
if the popup should have the links toolbar |
| status |
if the popup should have a status bar
across the bottom |
| menubar |
if the popup should have a menu |
| scrollbars |
if the popup should have scroll bars |
| resizable |
if users can resize the popup |
| dependent |
if the popup should close when its opener
window closes |
|
Step 1: Copy the code below and paste this script into the <HEAD>
section of your page that will contain the link to the popup.
Step 2: Copy the code below and paste into page where you want the popup
link to appear.
A small but crucial point is often overlooked. The command in onClick
must begin with return or the script won't work.
Be sure to start the command with return like this:
onClick="return popup(this, 'popup1')"
Don't put a space in the page name between the single quotes. If you
do, the link will behave just like a regular link.
One of the most frustrating problems with popups is that once they are opened
they have an tendency to stay in the background. The first time the user clicks
the link the popup pops up in front, but if the user then clicks back on the
main page again without closing the popup and then clicks on a link to
open the popup again, it won't come back to the front. It stays stubbornly in
the background.
To avoid this problem there's one more piece of code. This code does not go
in the main page. Put the following code in the popup page itself. So,
for example, the link above opens the page "popup1.html",
so the following code is in "popup1.html".
Step 3: Copy the code below and paste into the <HEAD>
section of the actual popup page.
Step 4: Test your popup! Be sure to reload the main page each
time you make changes to one of the popup properties.
|
