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

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();
Documentation generated by JsDoc Toolkit 2.1.0 on Mon Jul 06 2009 11:46:36 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.