Adds a semi-transparent overlay over a DOM element.

• Options, Events

• Spinner

new Mask(target[, options]);

1. target - (mixed) A string of the id for an Element or an Element reference to overlay; defaults to document.body
2. options - (object) a key/value set of options

• inject - (object) where to inject the layer. If not specified, the mask is injected into the document body. Example: inject: { where: 'after', target: element }
• hideOnClick - (boolean) if true, the mask will hide when clicked. Defaults to false.
• id - (string) if defined, the overlay layer will be assigned this id. If not defined, the id will default to 'mask-'
• destroyOnHide - (boolean) if true the mask layer is destroyed when hidden. The class will no longer function after this. Defaults to false.
• class - (string) the css class to apply to the layer; defaults to 'mask'.
• style - (object) if defined, will apply to the mask with Element.setStyles. You can also style the layer by just defining a style for the layer class name (defaults to ".mask"). Default styles can be found in the Styles directory of the MooTools More library on github or downloaded on the More builder on MooTools.net.
• maskMargins - (boolean) if true the mask will extend to the margins of the target. Defaults to false.
• useIframeShim - (boolean) if true the mask will use IframeShim to hide OS elements (select boxes, flash, etc) for IE6.
• iframeShimOptions - (object) options passed to IframeShim.

• show - (function) callback to execute when the layer is shown; passed the target element to which the Mask was attached.
• hide - (function) callback to execute when the layer is hidden; passed the target element to which the Mask was attached.
• destroy - (function) callback to execute when the layer is destroyed.
• click - (function) callback to execute when the layer is clicked.

var myMask = new Mask();
var myMask = new Mask($('myElement'));

The mask element is not styled, so if you don't add a css rule in your style sheets, it will be invisible. You can download the default styles here: mask.css

Toggles the Mask visibility. If the Mask is currently visible, it will hide. Otherwise it will display.

myMask.toggle(element);

1. element - (mixed, optional) A string of the id for an Element or an Element reference to overlay; defaults to the target passed in at initialization, but you can specify a different element if you wish to reuse the class.

• (object) This instance of Mask

Displays the Mask layer.

myMask.show();

• (object) This instance of Mask

Hides the Mask layer.

myMask.hide();

• (object) This instance of Mask

Destroys the Mask layer. This renders the instance of this class inert (and further calls to its methods will throw errors).

myMask.destroy()

• (object) This instance of Mask

Reasserts the position of the overlay layer.

myMask.position()

• (object) This instance of Mask

Reasserts the dimensions of the overlay layer. Note that this method is called when Mask.position is called, so you needn't call it if you call position.

myMask.resize()

• (object) This instance of Mask

Extends the Element Type with Mask methods.

Sets a default Mask instance for an Element.

el.set('mask'[, options]);

1. options - (object, optional) The Mask options.

• (element) This Element.

el.set('mask', {onClick: function(){..etc..}});
el.mask(); //obscure the element with the overlay
el.unmask(); //hide the overlay

Gets the default Mask instance for the Element.

el.get('mask');

1. name - (string) This should always be 'mask'.

• (object) The Element's internal Mask instance.

el.set('mask', {onClick: function(){..etc..}});
el.mask(); //show the mask
el.get('mask'); //The Mask instance.

Adds Mask shortcuts to the Element class.

Retrieves the "build-in" instance of Mask and calls its show method.

$('myElement').mask([options]);

1. options - (object - optional) the options for the default mask.

• (element) This Element

Retrieves the "build-in" instance of Mask and calls its hide method.

$('myElement').unmask();

• (element) This Element