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

Overview

The glow.widgets.Mask widget puts a semi-transparent layer over the page to block out the content. Usually, an overlay is placed on top of the mask making it modal.

Masks are used automatically by widgets that need to become modal, however this guide will help you build custom masks for those widgets.

Using the Mask widget

Creating a basic mask

//create mask instance
var myMask = new glow.widgets.Mask({
  onClick: function() { this.remove(); }
});
//display mask
myMask.add();

The above example creates a Mask instance and adds it to the page. In addition, the Mask is given a click event which removes it.

The Mask this creates is the default Mask used by most modal widgets.

Changing the appearence of the Mask

The colour and opacity of the Mask can be changed using options in the constructor.

//create mask instance
var myMask = new glow.widgets.Mask({
  color: "#fff",
  opacity: 0.8,
  onClick: function() { this.remove(); }
});
//display mask
myMask.add();

Further customisation can be achieved by editing the Mask element directly through the 'maskElement' property. 'maskElement' is a Glow NodeList.

//create mask instance
var myMask = new glow.widgets.Mask({
  onClick: function() { this.remove(); }
});
//add background image
myMask.maskElement.css("background", "url(stripe.png)");
//display mask
myMask.add();

For a complete listing of methods and properties, Refer to the API.

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.