If you have ever been near any of the homepages in Geocities
or Tripod, you must be familiar with the
small window that pops up with an advertisement banner. Undoubtedly, you
considered it irritating and in bad taste. But believe me when I say that
it is much more fun when you do the popping up yourself. Not convinced...?
Click here now!
I am not giving the source code for that because you're better off not
doing that to your visitors ;-)
Pop-up windows are usually used when you want to display something to the
users but you don't want them to leave the page that they are currently
viewing (Perhaps you are afraid that they might not return). How about a
Trivia Game as our next sample. I recently came across this game and found
it very entertaining. You are asked ten questions rapid-fire style, the
faster you answer, the more points you get. If you get more than 1500
points, you qualify for the $25 weekly drawing by registering. So, if you
are ready to play, click here.
Note: If you qualify, you might want to maximize the game window to register.
Let us now look at the code used to create that link.
Note that I am using single quote for nested strings. The
'return false' part
tells the browser that when the user clicks on the link, the browser should
stay on the same page rather than load the page specified by
onClick() handler calls the
window.open() function to open a new browser window. The first
'trivia.html' is the URL of the file to load in
the new window. So our window displays trivia.html
when it opens. (Note that it doesn't have to be an HTML file. It could also
be an image file or anything the browser can display.) The second parameter,
'triviaWnd' is the name we wish to give to the new window.
Details about this later. The third parameter determines the dimensions and
appearance of the window. We have specified a window of size 370x240 and a
status bar. Note that it is a comma-seperated list. The apperance of the
window can be controlled by changing the value of the third parameter.
The commonly used options are:
- Height of the new window in pixels (eg:
- Width of the new window in pixels (eg:
- Specifies whether to display the browser directory buttons like "What's Cool" etc. (eg:
- Enables or disables various hotkeys (eg:
- Specifies whether the "Location" box is to be displayed (eg:
- Specifies whether the new window should have a menu bar (eg:
- Specifies whether the user is allowed to resize the new window (eg:
- Specifies whether the new window can have scroll bars if necessary (eg:
- Specifies whether the new window has a toolbar (eg:
Instead of yes/no values, you may also give 1/0. i.e., you may write
toolbar=1 instead of
Here are some combinations that you can try for yourself. All of them open
this document in a new window with different functionalities.
A basic window. No menu, no toolbar, no status bar, not even scroll bars.
A window with menubar, location box and scroll bars.
A window with toolbar, statusbar and scroll bars. You can resize this window
if you want which wasn't possible with the other windows.
In the above code samples, I have split the code to multiple lines for easier
reading but when you use them, make sure that everything between the double
quotes is on a single line.