Back to home

Diabox

Another Modal Window Lightbox Thing

Preface

Diabox provides Mootools users with an extremely customizable yet powerful modal window solution. So why another solution? Well as I looked around for a good solution I realized many were either bloated or didn’t provide all the functionality I required. With all the above content types supported out of the box, an easy-to-implement interface to support more, and an extremely customizable set of options, Diabox suits the needs of all my development criteria. For more information just check out the project on github - the source speaks for itself.

Structure

Diabox provides great default functionality along with a Renderable interface which allows you to expand the renderable content types. The default content types are:

  • Images
  • Local HTML (via ajax)
  • Remote Pages
  • PDF’s
  • Powerpoints
  • TIFF’s
  • Youtube Videos
  • Vimeo Videos
  • Elements
  • Inline Content
  • Raw Text

Extension

Diabox's renderable interface allows you to extend the default functionality with little to no effort. By defining a single function you're able to define how the content of the modal is set. Let's take a look at an example:

After you've defined your renderable you must register it by doing the following:

You then need to determine when your renderable is called by passing a parser function into the diabox constructor:

Now, whenever a diabox target is triggered and your parser function returns your custom key, your renderable will be used to generate the diabox content.

Demonstration

To see Diabox in action please visit the demo page.