Modals

Modals are flexible dialog prompts.

Open Modal

Add a container element with the modal class. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the modal-header, modal-body and modal-footer - any or all of them.

Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the active class to the modal container.

<div class="modal active" id="modal-id">
  <a href="#close" class="modal-overlay" aria-label="Close"></a>
  <div class="modal-container">
    <div class="modal-header">
      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
      <div class="modal-title h5">Modal title</div>
    </div>
    <div class="modal-body">
      <div class="content">
        <!-- content here -->
      </div>
    </div>
    <div class="modal-footer">
      ...
    </div>
  </div>
</div>

Modal sizes

Open small size Modal

Use the modal-sm class for a smaller modal dialog. The container max width is 320px.

Open large size Modal

Use the modal-lg class for a full size modal. The container max width is 960px.

<div class="modal modal-sm">
  <a href="#close" class="modal-overlay" aria-label="Close"></a>
  <div class="modal-container">
    <!-- modal structure here -->
  </div>
</div>