Files

• _site-overlay.scss
• site-overlay.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/site-overlay

Module Overview

Examples

<div class="site-overlay" id="site-overlay"></div>

Then to trigger the Site Overlay you can call the plugin like so:

$('#site-overlay').siteOverlay('show');

$('#site-overlay').siteOverlay('hide');

Calling the plugin without passing show or hide will attempt to correctly deceipher what is most appropriate to use (i.e. it will automatically detect if it is currently visible then hide/show as appropriate):

$('#site-overlay').siteOverlay();

Options

Property Name	Default Value	Description
selfClose	true	If enabled, clicking the overlay will close/hide it.

$('#site-overlay').siteOverlay('show', {
    selfClose : true
});

Customizing

The Site Overlay module can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
background	rgba(black, 0.4)	This background for the overlay.
z-index	6	The z-index for the overlay.
transition	base('transition')	The transition time for the show/hide animation.

To change one of the above values, pass your new value(s) to the site-overlay() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include site-overlay((
    'background' : rgba(black, 0.6),
    'transition' : 0.2s
));