Mask.js a dead simple mask
a simple mask for the modern browser.
Install
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
API
Mask.init(option) => DOMElement
Init the mask and return the created <div>
var Mask = require('mask');// init the maskMask.init({// set background color (optional)backgroundColor:'rgba(34,25,123,0.5)',// set show/hide fade animation duration (optional)duration:500});
Mask.style(option)
style the underlying element
Mask.style({zIndex : 200});
Mask.show() => promise[DOMElement]
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.});
Mask.hide() => promise[DOMElement]
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.});});
Mask.onTouch(f)
Set the touchstart/click event handler
function myHandler(evt) {console.log("mask touched");}Mask.onTouch(myHandler);
ChangeLog
v0.2.0
* upgrade to q 1.0.x
* upgrade to zanimo 1.0.x
* rm qanimationframe dependency
v0.1.7
* Clean npm package by adding a .npmignore
* Remove package.json from example and test folder
v0.1.6
* Fix race condition on Mask show/hide operations.
v0.1.5
* Make Mask working on IE8.
* Add QanimationFrame dep.
v0.1.4
* using opacity & opaque background for not breaking in IE8.
v0.1.3
* add the possibility to override the zIndex.
v0.1.2
* add the possibility to override the transition function.
v0.1.1
* add Mask.style()