T his popup box is not an actual window. It pops right up on the page, partially hiding the page content. No need to worry about popup blockers. Good for bios, site maps, and other short items.
W e have tested the code in IE6.0, Firefox1.5, Opera8.51, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.
D epending on your knowledge of HTML and javascripts, this is an three or more part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. When we say three or more it refers to how many links you want to use with this effect.
- Part One is to copy and paste a portion of the script into a notepad*, save it as a .js script and upload it into the same directory* as the effect will be located.
* Grab the [ Notepad ] link for an important explanation pertaining to the use of a notepad and uploaded .js scripts.
.js scripts -- If you do not understand howto or need a refresher on this phase of the script, grab the below link for a full tutorial on howto:
[ Howto Make An External .js Script ]
* If you are going to upload the .js script into a different directory, then you need to reflect that change in the script that calls the external .js script. Grab the below link to see howto:
[ Upload To Different Directory ]
- Part Two is to copy and paste the script to call the external .js into the <HEAD> section of your document.
- Part Three is to add an onClick handler to the hyperlinks you want to display in the boxes. These go anywhere in the <BODY> section you want the popup(s) link(s) to appear
The handler should call the show_hide_box function with four parameters.
The first should always be " this".
The second is the width of the box in pixels
The third is the height in pixels
The fourth (last) one is the border style(solid or dotted).
I
f this is confusing, the below example should clarify it for you:
<a href="URL to page you build with info" onClick="return show_hide_box(this,200,270,'5px solid')">
Link Name Here</a>
Note of Importance ~ in reference to the border color around the popup. This is dictated by the color you have defined in your <BODY> tag under text="?". In other words, if your text is defined as lime or #00ff00, your border will be lime. See below example of a complete <BODY> tag with the text defined as #00ff00.
<body bgcolor="#000000" text="#00ff00" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">
Note of Importance ~ In reference to any and all page(s) you build for this effect. "Do Not" add a "Close Window" link or button to the page you are building for the popup effect. What will happen is the main page where your link(s) are on will close and your guests will lose your page completely. If this is unclear, grab the below link to see exactly what we are explaining.
[ Close Window Example ]
Note Of Importance: On the page you are going to have this effect on or any page that will link to the page with this effect is on, be sure of one thing within either the linking URL or the URL this effect is on. Be sure you "Do Not" have the backslash-forward slash / (which ever you call it) at the end of the linking URL. If you do, the effect "Will Not Work Correctly!. Besides getting an error message in the task bar, when you select a link that is associated with the effect, it will open to a full window instead of the little defined popup with a border. If this sounds confusing, see the below example:
- Right Way: https://www.angelfire.com/ny5/consigliere/absolutepopupbox.html
- Wrong Way:
https://www.angelfire.com/ny5/consigliere/absolutepopupbox.html/
S elect the links above to see what we are explaining about the Right and Wrong URL address.
I
f you would like to add this effect into your pages, grab the respective below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]
[ Rate This Page ]