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.

<button type="button" class="btn btn-outline-primary" data-boodoo-toggle="modal"
  data-boodoo-target="#centeredModal">Vertically centered modal</button>

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.

<button type="button" class="btn btn-outline-primary" data-boodoo-toggle="modal" data-boodoo-target="#scrollModal">Launch
  scrolling modal</button>

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.

<button type="button" class="btn btn-outline-primary" data-boodoo-toggle="modal"
  data-boodoo-target="#smallModal">Small</button>
<button type="button" class="btn btn-outline-primary" data-boodoo-toggle="modal"
  data-boodoo-target="#largeModal">Large</button>

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();

Native HTML5 <dialog> API (Zero-JS)

boodoo natively styles standard HTML5 <dialog class="modal"> elements. The browser natively manages focus trapping, Esc dismissal, and backdrop rendering with zero JavaScript dependency overhead:

Native HTML5 Dialog

This modal uses the browser's built-in <dialog> element with native focus trapping, top-layer rendering, and styled ::backdrop.

 
<button type="button" class="btn btn-primary" onclick="document.getElementById('myDialog').showModal()">
  <span>Open Native Modal</span>
</button>

<dialog class="modal" id="myDialog">
  <div class="modal-header">
    <h5 class="modal-title"><span>Native Dialog</span></h5>
    <button type="button" class="btn-close" onclick="document.getElementById('myDialog').close()" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p><span>Native top-layer rendering and backdrop without JS.</span></p>
  </div>
</dialog>