Version 1.4 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.
Further Info & Examples
- Mask user guide 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).
Constructor
new glow.widgets.Mask(opts)Parameters
- opts
- Type
- Object
Object containing the attributes specified below.
- color
The CSS colour of the layer that indicate
- Type
- String
- Default
- black
- Optional
- Yes
that the background content is inactive.
- disableScroll
If set to true, scrolling
- Type
- Boolean
- 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
- Function
- Default
- undefined
- Optional
- Yes
listener that is called when the user clicks on the background.
- opacity
The opacity of the layer that
- Type
- Number
- 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
- Number
- 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();
