Component Library

Modal: With Video 

<div class="iastate22-modal iastate22-modal--with-video" id="video-modal" aria-hidden="false">
    <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="iastate22-modal__container iastate22-modal__container-with-media" id="video-modal-content" role="dialog" aria-modal="true" aria-labelledby="video-modal-title">
            <button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
            <div class="iastate22-modal__media">
                <div class="video-embed">
                    <div class="video-embed__media-wrap">
                        <img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
                        <div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
                    </div>
                    <div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.</div>
                </div>
            </div>
            <div class="iastate22-modal__content">
                <h2 class="iastate22-modal__title" id="video-modal-title">Video Modal</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>
    </div>
</div>
 
<div class="iastate22-modal iastate22-modal--with-video" id="{{ id }}" aria-hidden="false">
  <div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="iastate22-modal__container{% if image %} iastate22-modal__container-with-media{% endif %}" id="{{ id }}-content" role="dialog" aria-modal="true" aria-labelledby="{{ id }}-title">
      <button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
      {% if image %}
      <div class="iastate22-modal__media">
        {% include "@video-embed" with video %}
      </div>
      {% endif %}
      <div class="iastate22-modal__content">
        <h2 class="iastate22-modal__title" id="{{ id }}-title">{{ title }}</h2>
        {{ content|raw }}
      </div>
    </div>
  </div>
</div>
 
{
  "id": "video-modal",
  "image": "../../img/Component-Modal-Square-Image_FPO.jpg",
  "title": "Video Modal",
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
  "call_to_action": "<a href=\"#\" class=\"iastate22-button\">Button Label Lorem</a>",
  "video": {
    "wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
    "source": "youtube",
    "title": "Your future starts now.",
    "youtube_video_id": "LjOmcZkXVcU",
    "vimeo_video_id": "",
    "caption": "Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  }
}
  • Content: 
    .iastate22-modal {
  display: none;

  &.is-open {
    display: block;
    position: relative;
    z-index: 11;
  }
}

.iastate22-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba($white, 0.9);

  .iastate22-modal--image-download & {
    backdrop-filter: blur(rem(9));
    background: rgba($white, 0.95);
  }
}

.iastate22-modal__container {
  background-color: $white;
  max-width: rem(414);
  width: 80%;
  max-height: 90vh;
  box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
  overflow-y: auto;
  position: relative;
  padding: rem(45);
  @include media-breakpoint-up(md) {
    max-width: rem(844);
    width: 90%;
    max-height: 100vh;
    padding: 0;
  }
  @include media-breakpoint-up(lg) {
    width: 100%;
  }

  .iastate22-modal--image-download & {
    width: 100%;
    position: unset;
    background-color: transparent;
    box-shadow: none;
  }

  .iastate22-modal--with-video &,
  .iastate22-modal--image-download & {
    @include media-breakpoint-up(md) {
      padding: rem(45) rem(45) 0;
    }
  }
  &.iastate22-modal__container-with-media {
    @include media-breakpoint-up(md) {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;

      .iastate22-modal--with-video &,
      .iastate22-modal--image-download & {
        flex-direction: column;
        flex-wrap: nowrap;
      }
    }
  }
}

.iastate22-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.iastate22-modal__content {
  padding: rem(20) 0 0 0;
  @include media-breakpoint-up(md) {
    flex: 0 1 auto;
    width: 100%;
    padding: rem(45) rem(75) rem(45) rem(54);

    .iastate22-modal--with-video &,
    .iastate22-modal--image-download & {
      padding: rem(24) 0 rem(45);
    }
  }
  .iastate22-modal__container-with-media & {
    @include media-breakpoint-up(md) {
      width: 64%;

      .iastate22-modal--with-video &,
      .iastate22-modal--image-download & {
        width: 100%;
      }
    }
  }
  .iastate22-modal__content-cta {
    margin-top: rem(20);
  }
}

.iastate22-modal__title {
  margin: 0 0 rem(10) 0;
  padding: 0;
  font-family: $typeface-sans-serif;
  font-size: rem(21);
  line-height: (30 / 21);
  font-weight: 700;
}

.iastate22-modal__close {
  background: transparent;
  z-index: 1;
  width: rem(44);
  height: rem(44);
  position: absolute;
  top: rem(2);
  right: rem(2);
  padding: 0;
  border: none;
  cursor: pointer;
  &:hover {
    .fa-xmark {
      color: $iastate-maroon;
    }
  }
  .fa-xmark {
    pointer-events: none;
    font-size: rem(25);
    color: $iastate-red;
    transition: 0.2s color ease-in-out;
    @include media-breakpoint-up(md) {
      font-size: rem(30);
    }
  }

  .iastate22-modal--image-download & {
    @include media-breakpoint-up(lg) {
      top: rem(60);
      right: rem(80);
    }
  }
}

.iastate22-modal__media {
  @extend %responsive-img;
  @include media-breakpoint-up(md) {
    flex: 0 1 auto;
    width: 36%;

    .iastate22-modal--with-video &,
    .iastate22-modal--image-download & {
      width: 100%;
      flex: 0 0 100%;
    }
  }
  &:before {
    padding-top: 100%;

    .iastate22-modal--with-video &,
    .iastate22-modal--image-download & {
      display: none;
    }
  }

  .iastate22-modal--image-download & {
    aspect-ratio: initial;
    > img {
      position: relative;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
}

.iastate22-modal__content-form {
  margin-top: rem(20);
  @include media-breakpoint-up(md) {
    display: flex;
    align-items: flex-end;
  }
  label {
    margin-bottom: 0;
    padding-right: rem(10);
    @include media-breakpoint-up(md) {
      flex: 1 1 auto;
    }
    .label-text {
      margin-bottom: rem(3);
    }
    input {
      width: 100%;
    }
  }
  button[type="submit"] {
    @extend %iastate22-button;
    margin-bottom: 0;
    @include media-breakpoint-up(md) {
      flex: 0 0 auto;
    }
  }
}

.iastate22-modal--with-video {
  .video-embed__caption {
    display: none;
  }

  .video-embed {
  }
}

.iastate22-modal--image-download .iastate22-modal__media .iastate22-button {
  position: absolute;
  bottom: rem(32);
  right: rem(32);
  margin-bottom: 0;

  @include media-breakpoint-down("lg") {
    padding: rem(8) rem(13.5);
    bottom: rem(24);
    right: rem(24);
  }

  .text {
    color: $iastate-maroon;

    @include media-breakpoint-down("lg") {
      display: none;
    }
  }

  .icon {
    @include media-breakpoint-down("lg") {
      position: relative;
      padding-left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src/components/modal/_modal.scss
  • Size: 4.7 KB

Modal

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • This uses a 3rd-party library (which is lightweight and very accessible) called Micromodal.js
  • There are two variants, the default modal contains an optional image, with headline, raw html and a raw html call to action section, and --with-form with also contains an optional image, with headline, raw html and a small form with an input and submit button. The type of input field and button is configurable.
  • The image field is optional in both variants
  • This uses a data-attribute of [data-micromodal-trigger] on the modal trigger and requires a corresponding id on the modal
  • The examples here use the .iastate22-button but any element can be used to trigger the modal
  • The custom styles are imported into the index.scss file as @import "../components/modal/modal";
  • The .ts file for the javascript is imported into the index.ts file as import Modal from "./components/modal"; and called as Modal.init();