Skip to content
This repository was archived by the owner on Dec 12, 2024. It is now read-only.

Modals

Jump to bottom
cgebken edited this page Feb 12, 2021 · 8 revisions

Beyond Canvas modals are designed to make their implementation as easy as possible for you. Still, there are a few things to keep in mind when working with them:

  • Modals are built with HTML, CSS, and JavaScript.
  • They are displayed overtop of all other elements of the page.
  • If a modal is present, the scroll functionality will be automatically removed for the <body>.
  • If the modal itself has a large .modal__body, a scrolling functionality will be automatically enabled for the modal.
  • Clicking on the modal backdrop area will not close the modal. Thus, be sure to include a button (<button>), link (<a>), or similar with a data-dismiss="modal" attribute in order to enable users to dismiss the modal.
  • Beyond Canvas only supports one modal at a time.

Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference with other elements.

Example:

<button type="button" class="button__solid--primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<div class="modal" id="myModal">
  <div class="modal__dialog">
    <div class="modal__content">
      <div class="modal__header">
        <h4 class="modal__title">Modal title</h4>
        <span class="modal__close" data-dismiss="modal"></span> <!-- This generates an `x` placed in the top right corner -->
      </div>
      <div class="modal__body">
        <!—Your modal content goes here -->
      </div>
      <div class="modal__footer">
        <button type="button" class="button__solid--secondary" data-dismiss="modal">Close</button>
        <button type="button" class="button__solid--primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Clone this wiki locally