This was completely overhauled.

Basically, I just released a new mootools modalBox Class called ‘baseBox’. You can see it on jsfiddle and play with it some. Full details, documentation are available on the project github page.

mootools modal box class

Features:

  • Full CSS support – whatever you do, it assigns to the box.
  • Complete control – plenty of options, events and instance references for any scripting scenario
  • Window nesting / grouping
  • Auto toggle when called on the same parent element
  • Smart closing through delegation
  • CSS3 shadows, gradients out of the box.
  • degradation to solid colours and image urls as fallback via CSS
  • CSS2D transform support – scale for FireFox, WebKit, IE9, Opera(untested?) via standard Fx.morph!
  • degradation via a simple fade when not supported

__VERY_ flexible – should be used as a base to extend. For example, to make a class that Extends baseBox that deals with lightBox-like image only display, here’s all you need to do: baseBox.lightBox.js demo. The lightBox demo is also included in the package and is on GitHub.

Similarly, you can make your own sub-classes, for example, baseBox.Request can work asynchronously to get HTML fragments and show them to the user.

Requirements:
MooTools-core 1.3+
MooTools-more 1.3+ - you need Element.delegate and Drag.move