Skip to main content

Modal

Use boodoo's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

How it works

  • Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body>, so that modal content scrolls instead.
  • Clicking on the modal "backdrop" will automatically close the modal.
  • boodoo only supports one modal window at a time.
  • Modals use position: fixed, which can occasionally be quirky. Where possible, place your modal HTML in a top-level position to avoid interference from other elements.

Example

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-boodoo-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-boodoo-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Vertically centered

Add .modal-dialog-centered to vertically center the modal.

Scrolling long content

When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo.

Optional sizes

Modals have three optional sizes, available via modifier classes placed on a .modal-dialog: .modal-sm, .modal-lg, .modal-xl, plus a fullscreen option.

Programmatic usage

Trigger modals via JavaScript:

// Show the modal with id="exampleModal"
const modal = boodoo.Modal.getOrCreateInstance(document.getElementById('exampleModal'));
modal.show();

// Toggle
const other = new boodoo.Modal(document.getElementById('centeredModal'));
other.toggle();