Modal

Modals are windows used for displaying prompts and subtasks without losing context of the parent application.

Examples

Modals are composed of several parts. To render a modal, include a modal backdrop, modal header, modal body, and modal footer (optional). By default modals are aligned to the top of the page.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<button id="modal-trigger-1" class="chi-button chi-modal__trigger" data-target="#modal-1">
  Launch demo modal
</button>

<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <section id="modal-1" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Modal Title</h2>
        <button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button" data-dismiss="modal">Cancel</button>
        <button class="chi-button -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

<script>chi.modal(document.getElementById('modal-trigger-1'));</script>

Center

Modals can also be placed in the middle of the page by applying the class -center to chi-backdrop.

Web Component
HTML Blueprint

<div class="chi-backdrop -center">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Modal Title</h2>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button">Cancel</button>
        <button class="chi-button -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Scrollable

Enable scrolling if the height of the modal's content is larger than the modal's content container.

Requirements

A max-height must be defined on chi-modal__content. Use max-height utility classes such as -mh--400 or -mh--480, or define your own value.

Web Component
HTML Blueprint

<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Modal Title</h2>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content -mh--400">
        <p class="-text -mt--0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Nam volutpat tellus sapien, ac aliquam nisl mattis id. Etiam laoreet malesuada tristique. Morbi luctus facilisis laoreet. Sed pharetra diam consequat, ultrices sem facilisis, ornare urna. Suspendisse nec mollis massa.
          Praesent ipsum purus, euismod quis mattis et, scelerisque in erat. Etiam laoreet dolor non suscipit laoreet. Sed nec mauris vitae ipsum mollis laoreet et sed nisi. In at metus eget neque consequat pellentesque. Aliquam erat volutpat.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque egestas ultricies justo, vel scelerisque justo. Aliquam mollis diam ac ligula feugiat placerat sed iaculis urna. Donec in mi consequat,
          cursus ante non, pulvinar eros. Phasellus viverra massa venenatis, pellentesque lectus auctor, condimentum nibh. Donec malesuada magna sed libero tincidunt, id tempus lectus mollis.
        </p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button">Cancel</button>
        <button class="chi-button -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Scrolling long content

Enable scrolling when modals become too long for the user’s viewport or device, they scroll independent of the page itself.

Web Component
HTML Blueprint

<div class="chi-backdrop -mh--480">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Modal Title</h2>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -mt--0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Nam volutpat tellus sapien, ac aliquam nisl mattis id. Etiam laoreet malesuada tristique. Morbi luctus facilisis laoreet. Sed pharetra diam consequat, ultrices sem facilisis, ornare urna. Suspendisse nec mollis massa.
          Praesent ipsum purus, euismod quis mattis et, scelerisque in erat. Etiam laoreet dolor non suscipit laoreet. Sed nec mauris vitae ipsum mollis laoreet et sed nisi. In at metus eget neque consequat pellentesque. Aliquam erat volutpat.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque egestas ultricies justo, vel scelerisque justo. Aliquam mollis diam ac ligula feugiat placerat sed iaculis urna. Donec in mi consequat,
          cursus ante non, pulvinar eros. Phasellus viverra massa venenatis, pellentesque lectus auctor, condimentum nibh. Donec malesuada magna sed libero tincidunt, id tempus lectus mollis.
        </p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button">Cancel</button>
        <button class="chi-button -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

With Subtitle

Web Component
HTML Blueprint

<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Modal Title</h2>
        <h3 class="chi-modal__subtitle">Modal subtitle</h3>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button">Cancel</button>
        <button class="chi-button -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Inverse Backdrop

Invert a modals backdrop by applying the class -inverse.

Web Component
HTML Blueprint

<div class="chi-backdrop -inverse">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Modal Title</h2>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button">Cancel</button>
        <button class="chi-button -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

No Border

Disable header or footer borders by applying the class -no-border to chi-modal__header or chi-modal__footer.

Web Component
HTML Blueprint

<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header -no-border">
        <h2 class="chi-modal__title">Modal Title</h2>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="chi-modal__footer -no-border">
        <button class="chi-button">Cancel</button>
        <button class="chi-button -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Multi-step

For multi-step modals, ensure the class -centered is applied to chi-modal__title. This will provide sufficient real estate on the left side to store a back button chi-modal__back.

Web Component
HTML Blueprint

<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title -centered">Modal Title</h2>
        <button class="chi-modal__back" aria-label="Back"></button>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button -primary -ml--2">Next</button>
      </footer>
    </section>
  </div>
</div>

Simple

Remove chi-modal__header and chi-modal__footer for a simple and customizable modal.

Web Component
HTML Blueprint

<div class="chi-backdrop">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <button class="chi-button -icon -close" aria-label="Close">
        <div class="chi-button__content">
          <i class="chi-icon icon-x"></i>
        </div>
      </button>
      <div class="chi-modal__content -text--center -p--6">
        <h2 class="-text--h3 -text--bolder -m--0">Modal Title</h2>
        <p class="-text -py--1 -px--3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mollis nulla, eget ornare tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet rutrum eros laoreet.</p>
        <button class="chi-button -primary -lg -mt--1">Action</button>
      </div>
    </section>
  </div>
</div>

Portal

Web Component
HTML Blueprint

<div class="chi-backdrop -portal">
  <div class="chi-backdrop__wrapper">
    <section class="chi-modal -portal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Modal Title</h2>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button -primary -lg">Save</button>
      </footer>
    </section>
  </div>
</div>

JavaScript

Properties

This component accepts options to configure its behavior.

Option	Default	Description
`animated`	`true`	Enables animation on modal display and hide, and fade effect in the backdrop.
`target`	`null`	Lets the developer referer the target programmatically instead of by data-target attribute. It accepts Element object and xpath selector string.

Preventing memory leaks

Modal components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elem = document.getElementById('modal-1');
var modal = chi.modal(elem);
// do stuff
modal.dispose();

It is safe to call the modal method more than once, as it will return any previously created modal component associated to the trigger.

var elem = document.getElementById('modal-1');
var modal = chi.modal(elem);
var elem2 = document.getElementById('modal-1');
var modal2 = chi.modal(elem2);
modal === modal2; // returns true

modal.dispose(); // Only have to do it once.

Accessibility

Accessibility guidelines coming soon