Site Overlay



  • _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

  • Name: site-overlay
  • Modifiers: visible
  • Components: null


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

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



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):



Property Name Default Value Description
selfClose true If enabled, clicking the overlay will close/hide it.
$('#site-overlay').siteOverlay('show', {
    selfClose : true


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