|
You have been looking around at other sites
and you see how they use popup windows and you decided you would like to
add one to your site for one reason or another. Well you are in luck, it
is easier than you think.
There are only a few simple steps you need to take in order to get this
to work.
1) Identify HTML page you would like to trigger the popup window from. This
means the page that will contain the link that prompts the window to open.
We will call this the primary page.
2) Identify the page you would like to open in the popup window. Let's assume
it is a welcome HTML page (welcome.htm).
3) Let's make this real easy, place both HTML files in the same directory.
Then you don't have to specify the path to the file, you can call it directly.
4) Open up the primary page with your favorite text editor and locate the
opening <head> tag, then locate the closing </head> tag. between these two
tags is where you will add the JavaScript code (one portion of it).
Figure 1
Basic Web Page Example:
<html>
<head> <- Opening HEAD tag.
<title>Test Popup</title>
<- JavaScript code will go here.
</head> <- Closing HEAD tag.
<body>
<p>Basic website stuff :)</p>
</body>
</html>
5) Go to the
Ace Popup Creator web page and follow the instructions on that page
to create the desired results. After you grab the code from "Step 1" go
to the next step in this article.
6) Paste the code from the Ace Popup Creator in the location shown in Figure
1 above.
Figure 2
It should look like this now:
<html>
<head>
<title>Test Popup</title>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
/****************************************************
AUTHOR: WWW.CGISCRIPT.NET, LLC
URL: http://www.cgiscript.net
Use the script, just leave this message intact.
Download your FREE CGI/Perl Scripts today!
( http://www.cgiscript.net/scripts.htm )
****************************************************/
var win=null;
---CODE ABBREVIATED---
// -->
</script>
</head>
<body>
<p>Basic website stuff :)</p>
<- Add the "Step 2" code from the Ace Popup Creator
here.
</body>
</html>
7) Believe it or not you are almost done!
Go back to the Ace Popup Creator web page and get the data "Step 2". Paste
the code from the Ace Popup Creator in the location shown in Figure 2 above.
Figure 3
The completed web page should look like this:
<html>
<head>
<title>Test Popup</title>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
/****************************************************
AUTHOR: WWW.CGISCRIPT.NET, LLC
URL: http://www.cgiscript.net
Use the script, just leave this message intact.
Download your FREE CGI/Perl Scripts today!
( http://www.cgiscript.net/scripts.htm )
****************************************************/
var win=null;
---CODE ABBREVIATED---
// -->
</script>
</head>
<body>
<p>Basic website stuff :)</p>
<a href="welcome.htm" onclick="NewWindow(this.href,'welcome','500','300','yes','center');return
false" onfocus="this.blur()">LinkText</a>
</body>
</html>
8) Save the file and you are done. Open
the primary html file in a browser and click the "LinkText" link.
You can now upload the HTML pages to your server. Make sure both files are
stored in the same directory.
Note: Instead of calling welcome.htm you could have specified http://www.yoursite.com.
Practice this a few times and you will be ready to start adding advanced
features to the popup windows.
|
