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. Furthermore, background body scrolling is automatically locked when the dialog is open via modern CSS body:has(dialog.modal[open]) and overscroll chaining is prevented:

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>

For mobile thumb navigation with swipe-down dismiss gestures, also check out the touch-enabled Bottom Sheet and sliding Offcanvas components.