audio blog book bookmarking business chat cms collaboration crm design directory email event finance food framework game green health job knowledge local management maps marketing mobile networking news organize pet philanthropy photo productivity project real-estate rss script search share sports social start-page stats storage store tools travel video web-os
ModalBox

An easy way to create popups and wizards

http://www.wildbit.com/labs/modalbox/

Tagged with: script

Posted on: September 30, 2007

total 1 ratings

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing bigger versions of images. :)

ModalBox is built with pure JavaScript and is based on Sam Stephenson’s excellent Prototype JavaScript Framework, script.aculo.us and valid XHTML/CSS. ModalBox uses AJAX to load content.

ModalBox Features:

  • Web 2.0-ready: ModalBox uses industry-standard libraries — prototype and script.aculo.us.
  • NEW! “Offline-mode”: Use dynamic- or plain-HTML without any Ajax-calls to fill out your dialog windows.
  • AJAX pages loading: ModalBox uses AJAX instead of deprecated iframe for content loading. It’s also more secure — you can’t access pages which 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 might be long just define the height of the ModalBox and it will be switched into “scrolling mode”
  • Browser and platform independent: Since most of 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 done 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.

Leave a comment for ModalBox:
Google Ads