Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

mootools modal box class with CSS3 transitions(2d scale)

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 Source
Octocat-spinner-32 css
Octocat-spinner-32 README.md
Octocat-spinner-32 package.yml
README.md

baseBox

Screenshot

A MooTools 1.3 modal box class which works fine with CSS3 features like:

  • gradients
  • border-radius
  • transition: scale
  • box-shadow - inset and normal
  • rgba
  • text-shadow
  • graceful degradation for older browsers via CSS only
  • supports -ms-transform, -moz-transform and -webkit-transform through Fx.Morph

Tested on

IE6, IE7, IE8, IE9, FF3, FF4, Chrome 11, Safari 4.0.4, Opera 11.10

note: IE6, IE7 and IE8 just fade the box up and need CSS ruleset to fall back on, like (background-image: url(yourgradient.gif); and so forth).

How to use

Get the required MooTools 1.3 core and build MooTools-more with Element.delegation and Drag.Move

Within your domready or load callback function, create an instance with whatever options suit you:

var box = new baseBox({
    element: this.wrap,
    warpClass: "baseBox baseBox2",
    width: 300,
    height: 100,
    centered: false,
    offsets: {
        x: 140,
        y: 100
    },
    modal: {
        enabled: false
    }
});

// open it.
box.doBox("<h2>sub window</h2>", "<div class='moto shadowy'>this is a sub window from main</div><center><img class='closeThis cur' src='/img/modal_close.png' /></center>");

Example

http://jsfiddle.net/dimitar/6creP/

Events and pointers

The following events are raised that youcan reference from your instance

  • onOpen - fires when doBox opens.
  • onContentLoaded - fires on setHTML method
  • onBeforeClose - fires before clean up when closing so you can garbage collect or whatever
  • onClose - fires after the box is closed
  • onMoving - fires when moving the box starts
  • onMoved- fires when stopped moving
  • onResize - fires after resizeBox has modified the baseBox dimensions

this.modal stores a pointer to the instance for scripting. this.wrap stores a pointer to the instance for scripting

Extendability

This also provides baseBox.lightBox - a mini class that extends baseBox as an example and displays an image in a lightbox style modal. View extended example

window.addEvent("domready", function() {
    new baseBox.lightBox("http://i.dailymail.co.uk/i/pix/2011/05_01/rihannabey1_302x322.jpg");
});

The lightbox version relies on Asset.js (it is but an example) and will lazyload the image, determine the size and set with lightBox width then compute the height automatically as per usual.

You can add logic here that reduces image dimensions to fit the window width and height without scrolling.

Screenshots

ScreenshotScreenshot

Something went wrong with that request. Please try again.