Version 1.0 glow.widgets.Mask
API Quick Reference
JavaScript is required to use the quick reference
A mask provides a background for a modal dialog, overlay, lightbox, etc.
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).
Further Info & Examples
Constructor
new glow.widgets.Mask(opts)-
Parameters
- opts
-
- Type
Object containing the attributes specified below.
- color
-
The CSS colour of the layer that indicate
- Type
- Default
- black
- Optional
- Yes
that the background content is inactive.
- disableScroll
-
If set to true, scrolling
- Type
- Default
- false
- Optional
- Yes
is disabled in the main document.
This feature is experimental. It works by moving the document into a new container, offsetting it and setting overflow to none. Because this adds a new element between body and your document, you may have problems if your scripts rely on certain elements. Children of <body> which have class "glowNoMask" will be left as children of <body>.
- onClick
-
Shortcut to attach an event
- Type
- Default
- undefined
- Optional
- Yes
listener that is called when the user clicks on the background.
- opacity
-
The opacity of the layer that
- Type
- Default
- 0.7
- Optional
- Yes
indicates that the background content is inactive (from 0 to 1).
- zIndex
-
The z-index of the opaque layer.
- Type
- Default
- 9990
- Optional
- Yes
AllowScroll is not set then the content of the page will be put in a div with a z-index one less than the value of this attribute.
Examples
var myMask = new glow.widgets.Mask();var mask = new glow.widget.Mask({ onClick : function () { this.remove(); } }); mask.add();
Properties
- maskElement
-
The node overlayed to create the mask. Access this if you want to change its properties on the fly.
Methods
- add
-
Displays the mask.
Synopsis
myMask.add(); - remove
-
Removes the mask.
Synopsis
myMask.remove();
