Popup Box v3.0

Window Popup Version 3.0

Show Example 1 | Hide Example 1
Show Example 2 | Hide Example 2

Popup Wizard

X Position

Y Position

Width
(100 Min.)

Height
(80 Min.)

UNIQUE box ID

Content Text

Content Background Color

Content Text Color

Content Font Style Set

Title Text

Titlebar Background Color

Titlebar Text Color

Border Color

Scrollbar Color
(IE5.5+ only)

Shadow Color

Shown on Start?

Draggable?

Resizeable?

OK for old browsers?

Script features/usage:

Each of these popups operate independently. So, all values can be different for each one, and each can behave differently.
You can drag these popups around by using the titlebar. This feature can also be disabled for windows that stay put.
You can resize them by clicking the little triangle icon in the lower right corner of each popup and dragging to the desired size. This feature can be disabled. If it is disabled, the little resize handle will not appear. Also, if resize is disabled, the minimize and restore buttons do not function.
To close the popup, just click the box in the corner . 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:
```
<a href="javascript:showbox('Div_ID1')">Show Div_ID1</a>
<a href="javascript:hidebox('Div_ID1')">Hide Div_ID1</a>
```
The four links in the top left of this page use this method to close and re-open the 2 pre-defined popups on this page. Obviously, you cannot create links like this to control popups created dynamically because you dont know what their ID will be.
To "minimize" the popup, click the minimize box . This will shrink the popup so just the titlebar shows. You can still drag the box around too.
To "restore" the popup, click the restore box . This will restore the popup to its original height.
If one popup is under another one, simply clicking anywhere on a popup underneath brings it to the top. Any new popup that is created will be above all the others.
Scrollbars will automatically appear if the content inside the popup exceeds the dimensions. In IE5.5+, these scrollbars can be set to a color.
These popups can be set to start in their "closed" state so they can be made to appear via a javascript pseudo link. This is preferable to creating a new popup via a link due to some technical reasons. Read the installation instructions for more information on this.
There is also a semi-transparent (IE5+,NS6+ only) shadow under the popups which can be set to any color (although black looks best) to give them a sense of depth.

To install this script, follow the steps below:

Paste the code below somewhere in between the <HEAD> and </HEAD> tags:
```
<script language="JavaScript" src="popup.js"></script>
```
You will need to have the file "popup.js" uploaded to your server.
Then, you'll need to create the popups using lists of parameters. Use the example below to see the format:
(all popup parameters must be on one line)
```
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);
```
- 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.
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.