New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Popup Box II

Last updated: November 30th, 2001 upgraded to v3.1, added feature by Dynamic Drive to display popup ONCE per browser session)

Description: Brian's awesome DHTML Popup box allows you to prominently present content in an elegant, non obtrusive manner. The feature rich box can be dragged and dismissed, with unlimited boxes per page supported! Note that the full interface of the box is visible in IE5+ and NS6+ only. Older browsers will display a popup window instead (can be turned on/off).

We've extended this script with the ability to pop-up only once per browser session. This is useful in preventing the popup from becoming a nuisance once its purpose has been served.

Demo: Show box 1 again | Show box 2 again


Directions

Step 1: Add the following code to the HEAD section of your page:

Select All

Step 2: You now need to define and insert the codes for each popup you want to display. Use the below wizard to create this code.

Popup Wizard

X PositionY Position
Width
(100 Min.)
Height
(80 Min.)
UNIQUE box IDContent Text
Content Background ColorContent Text Color
Content Font Style SetTitle Text
Titlebar Background ColorTitlebar Text Color
Border ColorScrollbar Color
(IE5.5+ only)
Shadow ColorShown on Start?
Draggable?Resizeable?
OK for old browsers? Popup ONCE
per browser session?



With the code generated, add the below script to the BODY section of your page, replacing the part in red with the code above:

<script>

window.onload=function(){
new popUp(250, 50, 350, 175, "box1"...
new popUp(250, 50, 350, 175, "box2"...
}

</script>
If you wish to display multiple popup boxes, simply add the generated code for each popup within the window.onload parenthesis.

Step 3: Finally, download the following zip file (by right clicking it, and selecting "save as"), and upload the containing files (4 .gif files and popup.js) to your webpage directory.