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
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();
