To install this script, follow the steps below:
- Step 1: Paste the below code somewhere in between the <HEAD>
and </HEAD> tags:
<script language="JavaScript" src="popup.js">
//Popup box II (By Brian Gosselin at http://scriptasylum.com/bgaudiodr)
//Modified slightly By Dynamic Drive
//For full source, visit http://www.dynamicdrive.com
</script>
- Step 2: You now need to define and insert the codes for each popup
you want to display. Use the
wizard to create this code, then paste the result in the <BODY>
section of your page, surrounded by window.onload=function{.....}. Here is an example:
<script>
window.onload=function(){
new popUp(200, 100, 300, 175, "Div", "This is a test", "white", "black", "bold 10pt sans-serif", "Title Bar", "navy", "white", "#dddddd", "gray", "black", true, true, true, true, false);
}
</script>
- Step 3: Finally, upload all the accompanying files that came with
this .zip file (the .gif and popup.js files) to your server.
Explanation of function new PopUp(.....)
new popUp(left_position, top_position, width, height, id_of_box, content_text, content_bgcolor, content_text_color, content_font_stylestring, title_text, title_bgcolor, title_text_color, border_color, scrollbar_color, shadow_color, is_hidden_on_start, is_draggable, is_resizeable, show_old, sessioncontrol);
- left_position - Left pixel coordinate from left edge of browser
window. Number.
- top_position - Top pixel coordinate from left edge of browser
window. Number.
- width - Width of popup in pixels. Number.
- height - Height of popup in pixels. Number.
- id_of_box - Unique arbitrary ID value given to the popup.
String.
- content_text - HTML string inside popup. Because the content is in
string form, watch for syntax! String.
- content_bgcolor - Content area background color. Hex color triplet
or valid color name string.
- content_text_color - Content text color, obviously. :) Hex color
triplet or valid color name string.
- content_font_stylestring - Font style set using cascading
stylesheet type syntax. Hex color triplet or valid color name string.
- title_text - Text to appear in the titlebar. String.
- title_bgcolor - Background color of the titlebar when active. Hex
color triplet or valid color name string.
- title_text_color - Color of the titlebar text. Hex color triplet or
valid color name string.
- border_color - Color of the popup borders. Hex color triplet or
valid color name string.
- scrollbar_color - Color of the scrollbar (IE5.5 only) and the color
of the titlebar when not active. Hex color triplet or valid color name
string.
- shadow_color - Semi-transparent shadow color (IE5+, NS6+ only). Hex
color triplet or valid color name string.
- is_hidden_on_start - Specifies whether the popup is initially
"closed". true or false.
- is_draggable - Specifies whether popup is draggable. true or false.
- is_resizeable - Specifies whether popup is resizeable. If not,
resize handle will not be present and the minimize and restore buttons will
not work either. true or false.
- show_old - Specifies whether the popup will show up in
"non-standards" browsers. The popup appears as normal windows in
these types of browsers if this value is enabled.
- sessioncontrol - Specifies whether popup should pop up only ONCE
per browser session, to minimize exposure to visitors. Default is
"false".
- The neat thing about this script is that none of the popups have to be
pre-defined. They can be created on-the-fly, just like the popup wizard
above! But, if you do have pre-defined windows you wish to use,
you'll have to create them once the page finishes loading. This is done by
putting them in a window.onload event handler. The code would look
something like:
window.onload=function(){
new popUp(250, 50, 350, 175, "box1"...
new popUp(250, 50, 350, 175, "box2"...
}
- If you are using a link to create a popup, please read:
Because a user can click a link repeatedly, the link you use to create the
popup will be using the same id_of_box, which will not work.
You must find some way of ensuring all popup id's are unique. Using a
counter and appending the counter value to a base id string works well (
'id' + 1 = 'id1' , 'id' + 2 = 'id2', and so on). Here is a quick script
example:
var counter=0;
function createPopup(){
counter++;
new popUp(50, 75, 200, 200, ('popupID'+counter), 'Content' , other parameters...);
}
This is why it may be better to have a popup predefined and use a link to
make it appear instead of using a link to create a new one.
- Also, do NOT use any spaces in the ID name, errors will result. Errors
will also appear if you use an invalid color name (such as
"blakc"). You can avoid this by using hex color triplet values
instead (ex: "#FFFFFF" instead of "white"), or make sure
the color names you use are CSS approved.
Miscellaneous:
.
This actually just "hides" the popup. They can also be hidden or
shown again through 2 functions: hidebox(ID) and showbox(ID).
ID is the ID of the popup you want to hide/show. Examples: