mask

A dead simple mask for the browser

Mask.js a dead simple mask

a simple mask for the modern browser.

with browserify and npm:

npm install mask

Example

demo: http://peutetre.github.io/mask/example/

Test

test runner: http://peutetre.github.io/mask/test/

Build tests and example

npm install
npm run build

open a browser at test/index.html

Init the mask and return the created <div>

var Mask = require('mask');
 
// init the mask
Mask.init({
    // set background color (optional)
    backgroundColor:'rgba(34,25,123,0.5)',
    // set show/hide fade animation duration (optional)
    duration:500
});

style the underlying element

Mask.style({
    zIndex : 200
});

Show the mask

Mask.show()
    .then(function (el) {
        // do something...
    }, function (err) {
        console.log(err);
        // occurs when the mask is already displayed
        // or when the mask is in transition.
    });

Hide the mask

Mask.hide()
    .then(function (el) {
        // do something...
    }, function (err) {
        console.log(err);
        // occurs when the mask is already hidden
        // or when the mask is in transition.
    });
});

Set the touchstart/click event handler

function myHandler(evt) {
    console.log("mask touched");
}
 
Mask.onTouch(myHandler);
* upgrade to q 1.0.x
* upgrade to zanimo 1.0.x
* rm qanimationframe dependency
* Clean npm package by adding a .npmignore
* Remove package.json from example and test folder
* Fix race condition on Mask show/hide operations.
* Make Mask working on IE8.
* Add QanimationFrame dep.
* using opacity & opaque background for not breaking in IE8.
* add the possibility to override the zIndex.
* add the possibility to override the transition function.
* add Mask.style()