Modal

• src
• components
• modal.scss

Class list

Description

An .overlay is a fixed positioned element, which obscures the rest of the body content. Any content you want can be put inside of an .overlay.

Make use of the other classes such as grid units, position utilities, and position presets to adjust the size and placement of the .modal inside the .overlay.

Structure

The way you decide to use your .overlay and .modal is largely up to you. Below is the structure used in the following example.

<div class="overlay absent">
    <div class="unit-8 unit-12-sm absolute center-center">
        <div class="modal">
            <!-- any content you want -->
        </div>
    </div>
</div>

Example

Click the button to below to open the modal example.

let body = document.querySelector('body');
let openModal = document.querySelector('#openModal');
let overlay = document.querySelector('.overlay');

openModal.addEventListener('click', function(e) {
    body.classList.toggle('oy-hidden');
    overlay.classList.toggle('absent');
});

overlay.addEventListener('click', function(e) {
    if (e.target.classList.contains('overlay') || e.target.classList.contains('close')) {
        body.classList.toggle('oy-hidden');
        overlay.classList.toggle('absent');
    }
});

Font size scaling

The padding and border-radius of a .modal can be adjusted by using the font size utility classes.