Modal

Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Simple Modal

To use a Simple modal component that will slide down and fade in from top of the page, add the .modal class followed by additional classes like .modal-dialog, .modal-txt, .modal-actions, .modal-header, and .modal-action-btns.

HTMLCopy
    <!-- Simple Modal -->
    <div class="modal-overlay"></div>

    <!-- Button to trigger Modal -->
    <div class="centered-flex-col-container">
        <button class="btn btn-primary modal-btn rounded-med space-S">Launch demo modal</button>
    </div>

    <div class="modal centered-flex-col-container">
        <div class="modal-header">
            <h2 class="heading-2">Modal Title</h2>
        </div>
        <hr class="divide-nav-items">
        <img class="btn-close" src="/assets/images/close-button.svg" alt="Close Button"/>
        <p class="modal-txt">
            Dialog body Text
        </p>
        <hr class="divide-nav-items">
        <div class="modal-actions flex-row-container">
            <button class="btn btn-disable close-btn rounded-med space-S">Close</button>
            <button class="btn btn-primary rounded-med space-S">Save changes</button>
        </div>
    </div>

JavaScriptCopy
const modalToggleBtn = document.querySelector(".modal-btn");
const modal = document.querySelector(".modal");
const cancelBtn = document.querySelector(".btn-close");
const closeBtn = document.querySelector(".close-btn");
const modalOverlayBg = document.querySelector(".modal-overlay");

const showModal = () => {
    modal.classList.add("show");
    document.body.style.overflow = "hidden";
    modalOverlayBg.style.display = "block";
    modalOverlayBg.style.backgroundColor = "var(--modal-overlay-color)";
}

const hideModal = () => {
    modal.classList.remove("show");
    document.body.style.overflow = "auto";
    modalOverlayBg.style.display = "none";
    modalOverlayBg.style.backgroundColor = "var(--white-color)";
}

modalToggleBtn.addEventListener("click", () => {
    if(!modal.classList.contains("show")) {
        showModal();
    } else {
       hideModal();