Web Programming: Javascript TinyBox JavaScript Popup Box – 3.4KB

JavaScript Modal Window Script

TinyBox is a lightweight and standalone modal window script. At only 3.4KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML input so the sky is the limit. Future versions will include additional features. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS. I have a couple tutorials and a few scripts I will be posting very soon so check back.

To display a popup box use the following code:

1 TINY.box.show('advanced.html',1,300,150,1,3);

There is nothing to initialize, just start using the script. The TINY.box.show function takes 6 parameters: the HTML content for the box or the relative path to the AJAX source, a toggle (true/false or 1/0) if the content is via AJAX, the width of the window (use 0 for auto), the height of the window (use 0 for auto), a toggle (true/false or 1/0) to animate the window, and the time in seconds to wait before auto hiding the popup (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

Update 11/15/2009 – Updated logic to speed up the animation and fix a positioning issue. Slightly dropped the code weight.

Update 11/16/2009 – Fixed issue that occurred when sizing down a box.

source: leigeber.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s