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

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

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/

Related posts:

1. AeroWindow – Create window 7 aero style pop-ups with jQuery
2. Visual jQuery LightBox – Create fantastic lightbox-style photo galleries and slideshows
3. Roar – Notification Widget to create pop-up notifications like OS X’s Growl Framework
4. Create MS Excel spreadsheet style web application interface with jQuery.sheet
5. Ample SDK – standard-based cross-browser JavaScript GUI Framework
6. Plumi – create your own YouTube style video sharing site

Popular stories from Web