mask

Places a mask over an element, useful for blocking user interaction during lengthy postbacks.

Example:

<a id="{{ #fb_logon }}" href="#facebook">
   <img src="/lib/images/fb-login-button.png" width="154" height="22" alt="Facebook login button">
</a>
{% wire id=#fb_logon
   action={mask target="logon_outer" message="Waiting for Facebook ."}
   action={redirect dispatch="facebook_authorize"} %}

In this example the logon_outer div will be masked while the browser is being redirected to Facebook.

Form postbacks are automatically masked.

Note that you need to include a css and a js file to have working masks:

{% lib "css/jquery.loadmask.css" %}
{% lib "js/modules/jquery.loadmask.js" %}

This action takes three possible arguments:

Argument Description Example
body Mask the whole page body
target The id of the element to be masked. target=”search-form”
message Message to show next to the spinner image. message=”Searching…”
delay Delay (in milliseconds) before the mask is shown. Only shows the mask during lengthy actions. delay=200

Edit on GitHub

jquery_effect DOM Elements mask_progress

Referred by

unmask

Removes a mask that was placed over an element using the mask action.

mask_progress

Sets the progress bar of a mask.