Modal – Design Portal

A modal is a window that appears on top of a parent screen.

Demo

<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();
}

Anatomy

Modal
Modal Inner
Modal Heading
Modal Body
Modal Close