Modal

<button class="button modal-button" type="button">Open Modal</button>  

<div class="modal">

  <div class="modal__inner">

    <button class="modal__close" aria-label="Close modal"></button>

    <h2 class="modal__heading">Modal Heading</h2>

    <div class="modal__body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur itaque necessitatibus modi quod est quidem sequi. Debitis earum voluptatem eum cupiditate eveniet, vitae expedita enim rem temporibus? Libero, ullam impedit?</div>

  </div>

</div>

/* ==================================================================

    BASE MODAL

================================================================== */

​

.modal {

  align-items: center;

  background: var(--overlay-color);

  block-size: 100vh;

  display: none;

  inline-size: 100vw;

  inset: 0;

  justify-content: center;

  position: fixed;

  z-index: 10;

​

  &--visible {

    display: flex !important;

  }

​

  &__heading {

    margin-block-end: 0.5rem;

  }

​

  &__body {

    font-size: 0.95rem;

    line-height: 1.5;

    text-align: start;

  }

​

  &__inner {

    margin: 0 auto;

    max-block-size: 90vh;

    max-inline-size: 80vw;

    padding: 2rem 1rem 1rem 1rem;

    position: relative;

  }

​

  &__close {

    @include close-icon;

    background: transparent !important;

    border: 0;

    cursor: pointer;

    display: block;

    inset-block-start: 0.5rem;

    inset-inline-end: 0.5rem;

    position: absolute!important;

  }

}

​

@media (min-width: $lg) {

  .modal {

    &__inner {

      max-inline-size: 40.625rem;

      padding: 2rem;

    }

​

    &__body {

      font-size: 1rem;

    }

  }

}

​

.hide-overflow {

  // to be used on the body level of the document to prevent scrolling while modal is visible

  overflow: hidden;

}

​

/* ==================================================================

    MODAL THEME OVERRIDES

================================================================== */

​

.modal {

  &__inner {

    border-radius: var(--border-radius);

    box-shadow: 0px 3px 6px #00000029;

    background: #f4f1ed;

  }

}

// Modal component

const modal = document.querySelector('.modal');

​

if (modal) {

  function toggleModal() {

    const modalButton = document.querySelector('.modal-button');

    const modalClose = document.querySelector('.modal__close');

    const body = document.querySelector('body');

​

    modalButton.addEventListener('click', function() {

      modal.classList.toggle('modal--visible');

      body.classList.toggle('hide-overflow');

    });

​

    modalClose.addEventListener('click', function() {

      modal.classList.remove('modal--visible');

    });

  } toggleModal();

}