7 years ago
353 Views
0 0

ModalBox – create Mac OS X style JavaScript pop-ups for Your Browser

Written by

ModalBox is a JavaScript technique that allow you to create Mac OS X style JavaScript pop-ups or modal dialogue box without page Reloads.

ModalBox - create Mac OS X style JavaScript pop-ups

The ModalBox is built with pure JavaScript and is based on Sam Stephenson’s excellent Prototype JavaScript Framework, script.aculo.us toolkit and valid XHTML/CSS. It uses AJAX to load content instantly, so it can be easily used with any server-side application to load just what you need at particular time.

Basically, ModalBox is based on GrayBox technique by Amir Salihefendic. But you can find a lot of similar techniques around the web: Lightbox JS, Lightbox gone wild, ThickBox etc.

Features of ModalBox

  1. Web 2.0-ready – ModalBox uses industry-standard libraries — prototype and script.aculo.us.
  2. “Offline-mode” – Use dynamic- or plain-HTML without any Ajax-calls to fill out your dialog windows.
  3. Ajax page loading – it 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.
  4. Callbacks support – You can attach your own JavaScript events after showing or hiding (and more) the ModalBox.
  5. Automatic height adjustment – it adjust Modalbox height depending on your content. No more height tweaking!
  6. “Scrolling mode”– If your content might be long just define the height of the ModalBox and it will be switched into “scrolling mode”
  7. 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.
  8. Multi-purpose – You can create complex wizards to guide users through the process. Image slideshows can be done too.
  9. Keystrokes support – Use ESC key to close ModalBox.
  10. Customizable Look & Feel – Use CSS to make ModalBox look like you want.
  11. Supports transitional effects – Slide down appearing and on-the-fly resizing.
  12. Lightweight – Just about 10 KB of code.
  13. Cross browser Modal Box – Tested in IE6, IE7, Firefox 1.0, 1.5, 2.0, Safari, Camino, Opera 8 and 9.

Download : http://github.com/okonet/modalbox
Demo : http://okonet.ru/projects/modalbox/

Article Categories:
Web application framework

Comments

wonderful comments!