Modal

A floating layer to get user's feedback or display information.

Basic 

<body class="is-masking">
  <div id="example-modal" class="modal modal--mask" tabindex="-1" role="dialog">
    <div class="modal__content" role="document">
      <header class="modal__header">
        <h4 class="modal__title">Modal Title</h4>
        <button type="button" class="modal__close" aria-label="Close"></button>
      </header>
      <div class="modal__body">
        "You have your way. I have my way. As for the right way, the correct way, and the only way, it does not exist."
      </div>
      <footer class="modal__footer">
        <button type="button" class="btn">Close</button>
        <button type="button" class="btn btn--primary">Ok</button>
      </footer>
    </div>
  </div>
</div>

pointcss does not include any JavaScript interaction with Modal. You need to implement the class toggle by yourself.

Sizing

Add .modal--sm or .modal--lg modifier class on .modal element to quickly change the size of modal content

<div id="sm-modal" class="modal modal--mask modal--sm" tabindex="-1" role="dialog">
  <div class="modal__content" role="document">
    ...
  </div>
</div>

<div id="lg-modal" class="modal modal--mask modal--lg" tabindex="-1" role="dialog">
  <div class="modal__content" role="document">
    ...
  </div>
</div>