Mar
24
2011
JavaScript // script // web

JavaScript Modal Windows – TinyBox2

Author An article by qeqnes    Comments No Comments

JavaScript Modal Windows

This update to the TinyBox modal box script brings a ton of new features and still clocks in under 5KB. The script now supports iframes and images natively. You can POST with Ajax. Clicking ESC will close the window. Callback functions can be passed for load and close events. You can set CSS IDs to override the default styling. CSS position can be toggled between fixed and absolute. The mask opacity can be sent. You have full control over window location. And of course there is now a close button out of the box you can toggle.

The script is now executed by passing an object due to the large number of options. There is nothing to initialize, just call the function on whatever mouse or browser event you like. A sample call would look like the following:

1
TINY.box.show({url:'advanced.html',width:300,height:150})

Parameters include (tag – description (type) – default):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html - HTML content for window (string) - false
iframe - URL for embedded iframe (string) - false
url - path for AJAX call (string) - false
post - post variable string, used in conjunction with url (string) - false
image - image path (string) - false
width - preset width (int) - false
height - preset height (int) - false
animate - toggle animation (bool) - true
close - toggle close button (bool) - true
openjs - generic function executed on open (string) - null
closejs - generic function executed on close (string) - null
autohide - number of seconds to wait until auto-hiding (int) - false
boxid - ID of box div for style overriding purposes (string) - ''
maskid - ID of mask div for style overriding purposes (string) - ''
fixed - toggle fixed position vs static (bool) - true
opacity - set the opacity of the mask from 0-100 (int) - 70
mask - toggle mask display (bool) - true
top - absolute pixels from top (int) - null
left - absolute pixels from left (int) - null
topsplit - 1/x where x is the denominator in the split from the top (int) - 2

Nearly all of the parameters above are optional. Of course you must include either the html, iframe, url, or image parameters as they drive the content. Height and width are option and will be calculated based on offsetWidth and offsetHeight in the case of HTML or Ajax content else by actual width and height with images. Iframe calls must include a height and width. By default the box will animate in the center of the screen in a fixed position.

Click here for the demo.

Click here to download.

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. This is a never-ending work in progress and I welcome any bug reports.

Tags: ,

Related Posts

About the Author:

Leave a comment