MOOdalBox – an HTML Lightbox

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:

Compressed version and a trimmed down distro of mootools 1.0
Commented / editable code and a full mootools 1.0 distro
 

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.

140 thoughts on “MOOdalBox – an HTML Lightbox

  1. Pingback: Ventana modal con PHP, Ajax y Mootools | Esteban Tundidor

  2. This is a very lovely code, do you plan to support the new Mootools 1.2, which should be release very soon.

  3. Pingback: Lightbox clones round-up at ajaxflakes.com

  4. Pingback: Colección de clones de Lightbox para todos | aNieto2K

  5. It’s not working…. When i click on a link it all goes alright till the moment the page is displayed, it comes the error page… it’s not the link path, cause it’s right….. how could it be??

  6. Pingback: Rob Phillips | Journal | » MOOdal Box testing

  7. Hi all

    When I saved the following page : http://www.e-magine.ro/playground/moodalbox/

    The windows does not appears as exemples even when I modified the source code of html to include CSS / JS / mootools.js / moodalbox.js / IMG

    the ” rel = ‘moodalbox’ ” is not working too, i fixed this by using javascript calls method.

    Someone can help me to send a form to moodalbox window ?

  8. Flash Video Player embeded, in IE7, it does not stop playing if you close the window until video is finished, why is that?

  9. great script,
    but i have problems in ie6 with flash object included with javascript; why ?

  10. Pingback: Web 2.0 modal window featuring lightbox slimbox thickbox lightwindow and moodalbox - chazzuka

  11. Pingback: TheMajesty’s SharePoint Blog » En surfant aujourd'hui, samedi 24-11-2007

  12. Pingback: How To Create A Javascript Close Link

  13. Pingback: MOOdalBox - Ventanas Modales Con Javascript Estilo LightBox

  14. Pingback: Actualidad, Entretenimiento y Humor » MOOdalBox - Ventanas Modales Con Javascript Estilo LightBox

  15. Pingback: E-magine.ro/web-dev-and-design/36/moodalbox - Tools teasered @ Feed UP !!

  16. Pingback: Webmaster 38 » Blog Archive » MOOdalBox: A modal box (inline popup) at ajax scripts compound

  17. Pingback: Multibox de la Phatfusion - cea mai recenta generatie de lightbox : din cotidian

  18. Pingback: Usando MOOdalBox – un Lightbox para HTML « Codeline

  19. Pingback: Popups, assistentes e caixas modais com ModalBox | Tecnologia da Informação - Desenvolvimento e Educação

  20. Pingback: Cool + Easy Age Verification Tutorial at SkinShare Dev Blog

  21. Pingback: links for 2008-02-09 | Libin Pan

  22. Pingback: Cult-foo » 14 cool mootools scripts

  23. Pingback: SkinShare tutorial for an age verification using MOOdalBox — e-magine [archives]

  24. Pingback: One year’s statistics - thanks :) — e-magine [archives]

  25. Pingback: Web 2.o Round up Modal Window Lightbox Effect Library

  26. Pingback: Lightboxスクリプトいろいろ | DesignWalker

  27. Pingback: The DCP Blog - The Blog of Ben Lister » Blog Archive » Modal Throwdown: A Lightbox Comparison

  28. Pingback: Lightboxスクリプトいろいろ - DesignWalker

  29. Pingback: WD style - lightbox

  30. Pingback: Moodalbox « Opera Omnia

  31. Pingback: Top 10 Ajax GreyBox and Ajax LightBox - Pogung177 - Affiliate Addict

  32. Pingback: LightBox Clones

  33. Pingback: MooRD: Uma extensão do Mootools « namespace Programatik

  34. Pingback: GhostNote» ブログアーカイブ » 【AJAX】lightbox風スクリプト

  35. Pingback: Stefano’s Blog(s) » Ajax Modal Popup Dialog with Mootools 1.2 (ThickBox, Moodalbox, Smoothbox) [UPDATED!]

  36. Pingback: Zero Style Design » Blog Archive » MOOTOOLS

  37. Pingback: Zero Style Design » Blog Archive » MOOTOOLS

  38. Pingback: Designlabel Blog | 20+ ways to create javascript modal windows and dialog boxes Designlabel Blog

  39. Pingback: Designlabel Blog | 20+ ways to create javascript modal windows and dialog boxes Designlabel Blog

Comments are closed.