Tutorial: Creating a Pop Up Window
Posted:Learn how to create a simple pop up window without knowing a lick of javascript.
 |
If you've been looking for a quick and easy way to learn how to create a pop up window, you are in luck. In this tutorial, you'll be taken through a few short simple steps of getting a link to trigger a pop up window. And no, you won't have to go through a tedious, lengthy treatise into javascript or even know javascript itself!
Before you begin, make sure you have two web pages ready: the
first page that will contain your trigger link; the second page that will
be "popped" when someone clicks on that link.
Step One: Create Link
Go to the page that will contain the link to your pop up and create one using the <a href></a> tag. But put a hash symbol (#) in place of the URL. This is to make sure the page doesn't go anywhere when someone clicks on it.<a href="#">Click me to pop a window open</a>You should have something like what you see above.
Step Two: Add "onClick"
Now add onClick=" " inside of the <a href> opening tag.<a href="#" onClick=" ">Click me to pop a window open</a>This is the bit of javascript that "triggers" an action when someone uses the mouse to click on the link. In the world of javascript, this is called an event handler.
Step Three: Add "window.open" command
Now insert "window.open ( )" inside of the double quotes that come right after "onClick="<a href="#" onClick="window.open( )">Click me to pop a window open</a>This bit of code not only tells the browser exactly what action is to be performed when someone clicks on the link; it also will contain information about the window that is to be opened-- a) where it's located; b) what it's name is; and c) what the height and width will be.
Step Four: Add link to page inside the parentheses
For the page that you want to "pop up", place a link to it, followed by a comma:<a href="#" onClick="window.open( 'page.html', )">Click me to pop a window open</a>This tells the browser the location of the window you want popped up. And yes, it has to be surrounded by single quotes, or you will get a javascript error when you get the script to run.
Step Five: Add page name
After the page link, add a name you would like to give for this pop up window. (Don't worry-- it can be any name you like). I have given my window the name, "myfirstpopup."<a href="#" onClick="window.open( 'page.html', 'myfirstpopup', )">Click me to pop a window open</a>In case you're wondering, you name all your windows in the event that you will have more than one that you will be popping.
Step Six: Add height and width attributes
Now add the width and height you would like the pop up window to be:<a href="#" onClick="window.open('page.html', 'myfirstpopup', 'height=300, width=400' )">Click me to pop a window open</a>And yes, the height and width attributes must be written exactly as I have here, separated by a comma and surrounded by single quotes.
Step Seven: Test Your Link!
When you're done, you should have something like this on your web page:Click me to pop a window open
Test your link and see if it pops open your window. If it does,
good job! If not, check out the troubleshooting section below.
Troubleshooting
Run into trouble? Then make sure you have done the following:- Separated each item inside window.open ( ) with a comma
- Surrounded each item by single quotes ('), not double quotes!
- Written the correct path to the popped up window. If your window pop up is located in gallery/vacationpics/hawaii.html, but you give the URL in window.open( ) as 'hawaii.html', obviously it won't show up and you will get a blank page!
- And last but not least: make sure you have placed your commas in the right places!
That's it! You're done! See how easy that was?