Moobox - Mootools-based Modal Window

There are many lightbox and modal scripts out there. So what makes this one special you might ask? Well, I created this script as I needed my modal window to have a more generic functionality than a simple lightbox, and be able to:

• Support AJAX, Flash, iframe, and image collections (galleries) content-types natively
• Support either single or stacked content in the same window. In other words, you can whether the modal window will override existing content whenever new content is fetched or stack it over existing content (useful for multiple-stage forms for example)
• Fire status events that can be bound to external event listeners anywhere in the code
• Support window-dragging
• Have a super-cool name: Moobox.js

Using Moobox.js

Moobox.js is divided into three classes:

1. Moobox: The base modal class, that defines a basic modal window functionality.
2. Moobox.Stack: Extends the base modal class and adds content stacking capabilities. Use this class if you want to create multiple-stage forms
3. Moobox.Gallery: Extends the base modal class with specific image-gallery capabilities (image navigation and preloading). Use this class to create an image gallery

The basic usage of all three classes is the same (see example below) and they only differ in the "options" object they take. Please look at the source-code, which is well-documented, for specific usage of each class.

Usage example:

<script type=“text/javascript”>
this.mbox = new Moobox({
  showOverlay:true,//use a page overlay when the modal opens
  dragable:true,//set modal to be dragable
  classes:{//define CSS classes for styling
    overlay:'mb-overlay',//page overlay class
    window:'mb-window',//modal window element class
    content:'mb-content',//modal content element class
    closer:'mb-closer',//modal close button class
    titlebar:'mb-titlebar',//modal window title bar class
    loading:'mb-loading'//modal window loading class (toggled whenever the modal loads new content)
  },
  fxDuration:{//define animation fx durations
    window:750, //modal window animation duration
    overlay:200 //page overlay animation duration
  },
  size:{ //define default sizes for the modal window
    closed:{x:25,y:25}, //closed state
    initial:{x:50,y:50}, //initial state, before first time content loading
    _default:{x:600,y:450} //default open state
  }
});
var links = document.body.getElements('a.modal');//find a collection of links that should open the modal
this.mbox.bindOpeners(links); //bind the links to the modal instance
</script>

Demo and Download

Moobox (Dragable)

• AJAX Content
• 
• A Flash Movie

Moobox.Gallery

Download the source code

You can download the script as a zipped file (right-click -> download as)

Compatibility

I tested this Class successfully with the following browsers:

• IE6 / IE7
• Safari 3 (Mac)
• Firefox 2 / 3
• Opera 9.6 (Mac)

The Class requires Mootools v.1.2 Core and Mootools v.1.2 with Fx.Slide,Drag,Drag.Move and Asset support

         

• Moosort - Mootools table-sorting
• Multi-format Web media player
• Moopick - Mootools-based Color Picker
• Moobox - Mootools-based Modal Window
• Serving Ruby on Rails with Apache2 and mod_fcgid on Leopard
• Setting up Apache, MySQL and PHP 5 with GD support on Leopard
• IE6 Transparent PNG and Dead Links
• Image Replacement For Form Buttons