banner design

ModalBox is a JavaScript technique for creating Web 2.0 – style modal dialogs (or sequence of dialogs) without using standard popups and page reloads.

It’s inspired by Mac OS X modal dialogs and based on Prototype JavaScript framework + script.aculo.us and valid XHTML/CSS. Content can be loaded with Ajax or just plain-HTML.

Mrototype Popup Modalbox

ModalBox Features

  • Web 2.0-ready. ModalBox uses industry-standard libraries — prototype and script.aculo.us.
  • Offline-mode. Use dynamic- or plain-HTML without any Ajax-calls to fill out your dialog windows.
  • AJAX page loading. ModalBox uses AJAX instead of deprecated iframe for content loading. It’s also more secure — you can’t access pages that are not on your host.
  • Callbacks support. You can attach your own JavaScript events after showing or hiding (and more) the ModalBox
  • Automatic height adjustment. ModalBox adjust it’s height depending on your content. No more height tweaking!
  • Scrolling mode. If your content is long, just define the height of the ModalBox and it will switch into “scrolling mode”
  • Browser and platform independent. Since most modern browsers use popup blockers, it’s hard to find another way to create 100% browser-compatible modal dialogs.
  • Multi-purpose. You can create complex wizards to guide users through the process. Image slideshows can be created too.
  • Keystrokes support. Use ESC key to close ModalBox.
  • Customizable Look & Feel. Use CSS to make ModalBox look like you want.
  • Supports transitional effects. Slide down appearing and on-the-fly resizing.
  • Lightweight. Just about 10 KB of code.
  • Works in most modern browsers. Tested in IE6, IE7, Firefox 1.0, 1.5, 2.0, Safari, Camino, Opera 8 and 9.

P.S. There is a Mootools clone of ModalBox named MOOdalBox.

WebResourcesDepot Feed