Site Overlay

All our modals use the reusable site overlay element as defined in the base_root.html (part of allink-core):

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

This approach has been chosen because of independent modal and site overlay layering requirements.

Styles

Setting the overlay styles is done in static/scss/base/_variables.scss. Search for =overlay.

Custom Events

There are custom event to trigger the site-overlay. More information in the comment section in /allink-core-static/js/modules/site-overlay.js.