Version 1.7Mask Widget

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.