Skip to content

Modals

Jump to bottom
Unai Abrisketa edited this page Apr 11, 2022 · 8 revisions

How it works

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>.
  • Remember to add the <scroll-shadow> tag: 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 cause issues in terms of 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>
      <scroll-shadow>
        <div class="modal__body">
          <!-- Your modal content goes here -->
        </div>
      </scroll-shadow>
      <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>

Methods

.showModal()

Manually opens a modal.

Example:

$('#myModal').showModal()

.hideModal()

Manually hides a modal.

Example:

$('#myModal').hideModal()

Events

Event Type Description
bc.modal.show This event fires immediately when the showModal instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
bc.modal.shown This event is fired when the modal has been made visible to the user.
bc.modal.hide This event is fired immediately when the hideModal instance method has been called.
bc.modal.hidden This event is fired when the modal has finished being hidden from the user.

Example:

$('#myModal').on('bc.modal.shown', function (e) {
  // do something...
})
Clone this wiki locally