Version 1.5 glow.widgets.Mask
API Quick Reference
JavaScript is required to use the quick reference
A semi transparent layer covering the page
Use this if you're wanting to block out the main content of the page. Anything you want to be on top of the mask needs to have a higher z-index (default: 9990).
glow.onReady()
call.Further Info & Examples
Constructor
new glow.widgets.Mask(opts)
-
Parameters
- opts
-
- Type
Object containing the attributes specified below.
- color
-
The colour of the mask
- Type
- Default
- black
- Optional
- Yes
- onClick
-
Shortcut to attach an event listener that is called when the user clicks on the mask.
- Type
- Optional
- Yes
- opacity
-
The opacity of the mask (from 0 to 1).
- Type
- Default
- 0.7
- Optional
- Yes
- zIndex
-
The z-index of mask layer
- Type
- Default
- 9990
- Optional
- Yes
Examples
var mask = new glow.widget.Mask({ onClick : function () { this.remove(); } }); mask.add();
Properties
- maskElement
-
The node overlayed to create the mask.
- Type
- glow.dom.NodeList
Example
//create mask instance var myMask = new glow.widgets.Mask(); //display mask myMask.maskElement.css("background", "url(stripe.png)");
Methods
- add
-
Displays the mask.
Synopsis
myMask.add();
Example
// create the mask var myMask = new glow.widgets.Mask(); // add the mask over the screen myMask.add()
- remove
-
Removes the mask.
Synopsis
myMask.remove();
Example
// create the mask var myMask = new glow.widgets.Mask(); // add the mask over the screen myMask.add() // remove the mask from over the screen myMask.remove()