The overlay is used to show content that should be displayed above the main content. Each overlay has a unique id. This means that no overlay can have the same id, I cannot stress this enough. This id is then used to toggle the correct modal.
The triggers of the overlay must contain the class js-overlay-trigger and the
custom data-attribute data-modal-target with the id of the modal that
they want to trigger.
IMPORTANT TO NOTE is that once the overlay is open, you cannot scroll anymore on the body.
<button class="js-overlay-trigger" data-overlay-target="layouts-overlay-example-1">
Open overlay
</button>
<div id="layouts-overlay-example-1" class="l-overlay js-overlay">
<div class="l-overlay__container">
This is the content of the overlay
</div>
<div class="l-overlay__close">
<button class="js-overlay-trigger" data-overlay-target="layouts-overlay-example-1">
close overlay
</button>
</div>
</div>
is-open
Indicate that the overlay is open and active on the page. By applying this class to the root of the l-overlay, we display it to the user. Toggling between this class will toggle the modal.
js-overlay-trigger
Place the trigger-class on any component that should toggle the overlay. Pass the id of the overlay within the attribute data-overlay-toggle. Do not use this class when there is no JavaScript needed needed from the brandplatform.
js-overlay
Place this class on the root of the overlay layout to initialise javascript functionality. Do not use this class when there is no JavaScript needed from the brandplatform. When using the JavaScript defined on the brandplatform the overlay must be passed an id.