JavaScript Modal Windows – TinyBox2

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.

Source link: http://www.scriptiny.com/2011/03/javascript-modal-windows/