Modals

Modals

A modal is a graphical element used to subordinate a pages main content. The modal node is a child of the parent page and contains tangential information relevant to that parent. Using modals to "takeover" a page is evil. Don't do it!

Modals can closed by clicking the "X" provided or anywhere else on the page.

<button id="1" class="btn btn-primary modal-button mobile-full" type="button">Modal 1</button>

<div class="modal">

  <div id="modal1" class="modal-container">
    <div class="modal-close">&times;</div>
    <div id="modal-content">

      <div class="modal-header">
        <h3>Modal #1</h3>
      </div>

      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, quaerat, incidunt, ratione minus blanditiis ipsum ducimus eum commodi reiciendis atque dolores cumque eaque? Qui, voluptate, quis nisi accusamus voluptatem distinctio nemo facere labore error tenetur veniam id rerum quisquam recusandae aspernatur quam in. Eligendi, sit, sunt provident atque dicta illo dolorem adipisci voluptatum quis velit ratione nam libero necessitatibus nisi optio officia debitis voluptatem dolorum fugit voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>

      <div class="modal-footer">
        <a href="" class="btn btn-primary right mobile-full">Continue</a>
      </div>

    </div>
  </div>
  <div class="modal-overlay"></div>
</div>