TheaterMania Component Library

Modals 

<div class="modal-overlay is-active js-modal-overlay">
    <div class="modal js-modal">
        <div class="modal__inner">

            <button class="btn btn--close js-btn-close">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>

            <div class="modal__content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                    eu, pretium quis, sem.</p>
            </div>
        </div>
    </div>
</div>
 
<div class="modal-overlay {{class}} js-modal-overlay">
  <div class="modal js-modal">
    <div class="modal__inner">
      {{render '@buttons--close'}}
      <div class="modal__content">
        <p>{{copy}}</p>
      </div>
    </div>
  </div>
</div>
 
{
  "class": "is-active",
  "copy": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem."
}
  • Content: 
    /**
 * @overview Close modal interaction.
 * @module Modals.js
*/

const modal = document.querySelector(`.js-modal-overlay`);

if (modal) {
  const closeButton = modal.querySelector(`.js-btn-close`);
  closeButton.addEventListener(`click`, () => {
    modal.classList.remove(`is-active`);
  });

  document.addEventListener(`click`, (e) => {
    if (!e.target.closest(`.js-modal`)) {
      modal.classList.remove(`is-active`);
    }
  });
}
  • URL: /components/raw/modals/Modals.js
  • Filesystem Path: src/components/01-Units/Modals/Modals.js
  • Size: 441 Bytes
  • Content: 
    .modal-overlay {
  position: absolute;
  margin-top: -50vh;
  padding-top: 50vh;
  top: 25vh;
  right: 0;
  left: 0;
  height: 100%;
  z-index: -1;
  background: rgba($color-black, 0.5);
  opacity: 0;
  transition: $transition;
  transform: translateY(-25vh);

  @include breakpoint($break-medium) {
    position: fixed;
    top: 50vh;
  }

  &.is-active {
    z-index: 10;
    opacity: 1;

    .modal {
      opacity: 1;

    }
  }
}

.modal {
  position: relative;
  margin: 0 auto;
  width: 80%;
  max-width: 53.75rem;
  opacity: 0;
  background: $color-background;
  border-radius: $border-radius;
  box-shadow: 0 0 0.5rem 0 rgba($color-black, 0.75);
  transform: translateY(6rem);
  transition-delay: 2s;
  transition: $transition;

  .modal-overlay.is-active & {
    transform: translateY(3rem);
  }
}

.modal__content {
  padding: 2rem 2.5rem 1.88rem;
  text-align: center;
}
  • URL: /components/raw/modals/Modals.scss
  • Filesystem Path: src/components/01-Units/Modals/Modals.scss
  • Size: 883 Bytes

There are no notes for this item.