Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

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).

Widgets must be called in a glow.onReady() call.

Further Info & Examples

Constructor

new glow.widgets.Mask(opts)

Parameters

opts
Type
Object

Object containing the attributes specified below.

color

The colour of the mask

Type
String
Default
black
Optional
Yes
onClick

Shortcut to attach an event listener that is called when the user clicks on the mask.

Type
Function
Optional
Yes
opacity

The opacity of the mask (from 0 to 1).

Type
Number
Default
0.7
Optional
Yes
zIndex

The z-index of mask layer

Type
Number
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()
Documentation generated by JsDoc Toolkit 2.1.0 on Mon Jul 20 2009 14:55:31 GMT+0100 (BST)

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.