Modals

Requires JavaScript

Default

A modal will display over the screen when toggled with the active class.

A modal can easily be opened by setting data-modal with the matching id of the desired modal on a button with the modal__open class. Similarly, a button with the same setup and the modal__close class will close the modal.

If you need to prevent the background from scrolling, toggle the modal-open class on the body element while the modal is open.

Demo

Markup

<button class="button button--lg modal__open" data-modal="default-modal">Standard Modal</button>
<!-- Standard Modal -->
<div id="default-modal" class="modal">
  <div class="modal__inner">
    <div class="modal__header">
      <button class="button modal__close" data-modal="default-modal">
        Close 
        <i class="pi-times"></i>
      </button>
      <!-- Modal Header goes here! -->
    </div>
    <div class="modal__content">
      <!-- Modal content goes here! -->
    </div>
  </div>
</div>

Modifiers

Modifier †	Data Attribute	Behavior
`modal--small`	`data-modal`	Small sized modal.
`modal--large`	`data-modal`	Large sized modal.
`modal--full`	`data-modal`	Full sized modal, takes up 100% of the viewport.
`modal--centered`	`data-modal`	Centers the modal in the middle of the viewport.

† The base class is always required.

If you want to make a dialog box, you can just remove the modal__header from the modal!