Tips & Tricks
Advanced Topics
Creating A Popup Window

Pop-up Windows
A popup window is a web browser window that is smaller than standard windows and without some of the standard features such as tool bars or status bars.
 
For the average developer, a popup can be a wonderful feature to provide out of the way definitions in a large document. Think of this feature like a Wikipedia.com type of feature. You can read a synopsis of a topic and provide the user with additional information, such as word definitions, if they want further information. This helps limit the size of the original page, while still providing clarity to those who need it.
 
Another use of popups can help businesses who set up websites to provide manuals, policies, procedures or standards online. Many of these documents are already large and adding in additional information to provide clarity, such as definitions, can simply make those webpages even longer and somewhat overwhelming. You can limit the size of the document, by putting those definitions or information of clarity off to the side as a pop-up link.
 
 
Creating A Popup
This is how you create a pop-up window.
 
First place this javascript in the header section of your webpage.
 
<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,resizable=yes,scrollbars=yes');
return false;
}
//-->
 
Because of a widespread bug in MSIE, do not put any spaces in the list of properties. The entire list of properties goes inside quotes. So, for example, the following line of code sets width to 400, height to 200, and turns scrollbars on.
 
 
Then create a link in the body of the page. The link like the following, would run the script:
 
<A HREF="popupbasic.htm"
onClick="return popup(this, 'notes')">my popup</A>
 
The window that will popup is the file named popupbasic.htm. You'll have to create this as a standard html page and store it in the location you specific in the HREF.
which creates this link:
 
my popup
 
Most of the link is as usual. The URL of the page being linked to is in the HREF attribute. We've added an additional attribute called onClick. Copy the code as it is into your link, with only a small modification. The second argument of the popup() -- 'notes' -- indicates name of the popup window. Every popup window should have its own unique name. Be sure to put the name in single quotes (''). So if you want to name the popup 'basic' then this would be the code:
 
<A HREF="popupbasic.htm" onClick="return popup(this, 'basic')">my popup</A>
 
 
Read This Next Part Or You'll Go Insane Trying to Figure Out Why Your Popup Doesn't Work 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, 'notes')"
 
And don't put a space in the page name between the single quotes. If you do, the link will act just like a regular link.
 
 
Popup Windows: Closing The Popup
closing the popup can occur in 2 forms.
1. You allow the user to click the 'X' in the window.
2. You provide a 'close' link in the popup window itself.
 
If you want to add a "close" link in the popup, add the following script to the popupbasic.htm file.
 
<SCRIPT TYPE="text/javascript">
<!--
function targetopener(mylink, closeme, closeonly)
{
if (! (window.focus && window.opener))return true;
window.opener.focus();
if (! closeonly)window.opener.location.href=mylink.href;
if (closeme)window.close();
return false;
}
//-->
</SCRIPT>
 
Then code the link in the body of the popup window like this:
  <A HREF="popupbasic.htm" onClick="return targetopener(this,true,true)">close</A>
  which creates the "close" link in the popup window.
 
Keep in mind, you should still link to a valid URL in case the user found the page without opening it as a popup. So you might want to fully qualify HREF. Instead of just HREF="popupbasic.htm", make it HREF="http://www.whatever.com/popupbasic.htm"
 Next: Uploading Your Site