Requires JavaScript


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.



<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">
        <i class="pi-times"></i>
      <!-- Modal Header goes here! -->
    <div class="modal__content">
      <!-- Modal content goes here! -->


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!