Class JX.Mask

Show a "mask" over the page for lightboxes or dialogs. This is used by Workflow to draw visual attention to modal dialogs.

JX.Mask.show();
// Show a dialog, lightbox, or other modal UI.
JX.Mask.hide();

Masks are stackable, if modal UIs need to spawn other modal UIs.

The mask has class jx-mask, which you should apply styles to. For example:

.jx-mask {
  opacity: 0.8;
  background: #000000;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

You can create multiple mask styles and select them with the mask_type parameter to show() (for instance, a light mask for dialogs and a dark mask for lightboxing):

JX.Mask.show('jx-light-mask');
// ...
JX.Mask.hide();

This will be applied as a class name to the mask element, which you can customize in CSS:

.jx-light-mask {
  background: #ffffff;
}

The mask has sigil jx-mask, which can be used to intercept events targeting it, like clicks on the mask.

Hide the current mask. The mask stack is popped, which may reveal another mask below the current mask.

Show a mask over the document. Multiple calls push masks onto a stack.