e-magine(pretty & functional)

MOOdalBox: A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.
It can be used to display some help document, an extra options page, a registration form, etc. It eliminates the need of classic popup windows, that may get blocked by popup blockers.
It's originally based on the excellent code behind Slimbox, so it inherits most of it's qualities / functionality. Compressed, it's only 4.2 Kb (about 25 Kb, including images, CSS and a light version of mootools 1.0).

NEW: discuss MOOdalBox on the forums. Get support from others using it.

Demo

Open a default moodalbox, a larger (700x500px) one and one with an error (points to an inexistent file).

Download

Version 1.2.1 is currently available for download. For other versions, check out the Google Code project for MOOdalBox where you'll find a repository of different versions.
Choose your download type below:

Requirements

MOOdalBox requires mootools 1.0 or newer. You can either use the one provided in the archive, or download your own customized version from the mootools download page. But beware, the mootools version included is stripped down to only include the modules that MOOdalBox needs:

• Core: Moo, Utility
• Native: Array, String, Function, Element, Event
• Addons: Common, Dom
• Window: Window.Base, Window.Size
• Effects: Fx.Base, Fx.CSS, Fx.Style, Fx.Styles
• Remote: XHR, Ajax

Setup

Copy all the files in the archive to your folder. MOOdalBox uses the following folder structure (if you need to change it, be sure to modify the paths in the CSS file as well):

|-css
|   moodalbox.css
|-img
|   closelabel.gif
|   loading.gif
|-js
|   mootools.js
|   moodalbox.js

Include moodalbox.js (and mootools.js as well, of course) and moodalbox.css in your page header: <script type="text/javascript" src="/js/mootools.js"></script> <script type="text/javascript" src="/js/moodalbox.js"></script> <link rel="stylesheet" href="/css/moodalbox.css" type="text/css" media="screen" /> Then simply add rel="moodalbox" to any of the links you want to open inside a MOOdalBox: <a href="some-page-to-load-inline.html" rel="moodalbox" title="Caption: a description of the page that's loading.">some page</a>.

Extra options

You will find some extra options in the JS file right at the beginning (constants - there's an explanation right next to each one). The title attribute of your links will be used as a caption. Some more options can be passed via the rel attribute of the link, such as width and height, for now (more will be available soon). For example, opening a 800x600px MOOdalBox is done this way: <a href="some-page.html" rel="moodalbox 800 600" title="Caption: a description of the page that's loading.">some page</a> If you would like to open a MOOdalBox using javascript, you may do it this way: MOOdalBox.open( // case matters
"http://www.example.com/", // the link URL
"Some kind of caption", // the caption (link's title) - can be blank
"500 400" // width and height of the box - can be left blank
);

Customization

Have a look at the CSS file, lots of stuff can be changed from there.
(!) When changing the "close" image, be careful to specify its dimensions in the CSS file as well.

Google Code project

I have set up a Google Code project for MOOdalBox, that you may use for posting any issues you may have with the script. This way, all issues are centralized in one place, for all to see and me to solve

Troubleshooting

• check the include paths (for images also); modify to suit your own folder structure. I usually have a css, js and img folders whatever I do so this is built accordingly.
• if your moodalbox is not centered (displayed at the top of the page) and the overlay is displayed as a narrow stripe only, it's because of your current doctype definition. You should use an XHTML doctype for MOOdalBox to work. See the W3Schools HTML doctype tag page. Also, please note that the DTD should be the absolute first line of your doc, or the browser won't interpret it and will go into quirks mode.

To do / Future versions

• ability to load images (I'll leave that to the dedicated plugins that already exist, for modularity's sake)
• set an optional timeout, so that if there's no response from the server, it displays another neat error message
• callback function onClose of the moodalbox
• a .config() method, that will allow changing options on the fly, without modifying the JS file
• more stuff, based on your suggestions

Changelog

Version 1.2.1 (Feb/19/2006)

• Corrected some bugs that somehow slipped into the 1.2 release.

Version 1.2 (Feb/09/2006)

• Added error handling (it now diplays a neat error message inside the window, that you can dismiss by clicking anywhere
• Rewrote some of the code to take advantage of newer mootools 1.0 features
• Added a keylistener for CTRL + W, CTRL + X and ESC, to close the MOOdalBox
• Some code optimizations

Version 1.1 (Jan/2007)

• Completely removed the key listener, to make it usable with web forms.
• Converted some of the functions to newer mootools 1.0 compatible code.

Version 1.0 (Dec/2006)

• Initial release, code based on Christophe Beyls's Slimbox (http://www.digitalia.be/software/slimbox).
• Removed some functionality, such as next / previous image, gallery functions, key listeners for some keys.

License:

MIT style, meaning you can do anything with the above code, but I won't be held responsible if it blows your microwave up.

The story:

I was faced with the request of implementing a modal box into one of my projects, and the client suggested ModalBox, but this one uses prototype and I had done everything else on the website using mootools and didn't want to load extra JS's just for that. So I searched for a mootools version (just like I used Slimbox instead of LightBox V2), but couldn't find one. So I made my own, based on the excellent code of Slimbox.