Modal

The Modal component creates accessible pop-up dialogs with customizable sizes and smooth animations for notifications, lightboxes, or custom content.

Modal components integrate Bootstrap's JavaScript plugins for interactivity, paired with custom styling for a unique and consistent user experience.

Class Name	Type	Description
modal	Component	Modal container
modal-dialog	Inner	Modal dialog
modal-content	Inner	Modal box
modal-header	Inner	Modal header
modal-title	Inner	Modal title
modal-body	Inner	Modal body
modal-footer	Inner	Modal footer
modal-sm	Size	Small size
default	Size	Medium size(default)
modal-lg	Size	Large size
modal-xl	Size	Extra large size
modal-fullscreen	Size	Always fullscreen
modal-fullscreen-sm-down	Size	Fullscreen under sm breakpoint
modal-fullscreen-md-down	Size	Fullscreen under md breakpoint
modal-fullscreen-lg-down	Size	Fullscreen under lg breakpoint
modal-fullscreen-xl-down	Size	Fullscreen under xl breakpoint
modal-fullscreen-xxl-down	Size	Fullscreen under 2xl breakpoint
modal-dialog-scrollable	Modifier	Scrollable dialog
modal-dialog-centered	Modifier	Centered dialog
modal-fullscreen	Modifier	Fullscreen modal

Example

Click the button below to toggle a working modal. It will slide down and fade in from the top of the page.

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Demo modal</button>

<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 text-base font-semibold" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="modal" aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z" stroke-width="0.5" stroke="currentColor"/></svg>
        </button>
      </div>
      <div class="modal-body">
        This is a modal window. You can add any content here—text, buttons, forms, or media.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-subtle-neutral me-2" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-subtle-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>

Static backdrop

When the backdrop is set to static, the modal won’t close when clicking outside of it. Click the button below to try it.

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Static backdrop modal</button>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-base font-semibold" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="modal" aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z" stroke-width="0.5" stroke="currentColor"/></svg>
        </button>
      </div>
      <div class="modal-body">
        This is a modal window. You can add any content here—text, buttons, forms, or media.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-subtle-neutral me-2" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-subtle-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>

Scrolling long content

When a modal is taller than the user’s viewport or device, it scrolls independently of the page. Try the demo below to see this in action.

Create a scrollable modal by adding .modal-dialog-scrollable to .modal-dialog, allowing the modal body to scroll.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Vertically centered

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

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Toggle between modals

Use data-bs-target and data-bs-toggle to switch between modals, such as opening a password reset modal from a sign-in modal. Please note multiple modals cannot be open at the same time.

HTML

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-base font-semibold" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="modal" aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z" stroke-width="0.5" stroke="currentColor"/></svg>
        </button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-base font-semibold" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="modal" aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z" stroke-width="0.5" stroke="currentColor"/></svg>
        </button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>

Optional sizes

Modals offer three optional sizes via modifier classes on .modal-dialog. These sizes activate at specific breakpoints to prevent horizontal scrollbars on smaller viewports.

Size	Class	Modal max-width
Small	`.modal-sm`	`300px`
Default	None	`500px`
Large	`.modal-lg`	`800px`
Extra large	`.modal-xl`	`1140px`

The default modal without any modifier class is considered the medium size modal.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Create a fullscreen modal that covers the user’s viewport by adding the appropriate modifier classes to .modal-dialog.

Class	Availability
`.modal-fullscreen`	Always
`.modal-fullscreen-sm-down`	`640px`
`.modal-fullscreen-md-down`	`768px`
`.modal-fullscreen-lg-down`	`1024px`
`.modal-fullscreen-xl-down`	`1280px`
`.modal-fullscreen-xxl-down`	`1536px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen">
  ...
</div>

<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS variables

The modal component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.modal {
  --modal-zindex: 1055;
  --modal-width: 31.25rem;
  --modal-padding: --spacing(4);
  --modal-margin: --spacing(2);
  --modal-color: var(--text-color-default);
  --modal-bg: var(--background-color-default);
  --modal-font-size: var(--text-base);
  --modal-border-color: var(--border-color-light);
  --modal-border-width: 1px;
  --modal-border-radius: var(--radius-2xl);
  --modal-inner-border-radius: calc(var(--modal-border-radius) - var(--modal-border-width));
  --modal-header-padding-x: --spacing(4);
  --modal-header-padding-y: --spacing(4);
  --modal-header-border-color: var(--border-color-light);
  --modal-header-border-width: 1px;
  --modal-title-line-height: 1.5;
  --modal-footer-padding-x: --spacing(4);
  --modal-footer-padding-y: --spacing(4);
  --modal-footer-bg: unset;
  --modal-footer-border-color: var(--border-color-light);
  --modal-footer-border-width: 1px;
  --modal-fade-transform: translate(0, -50px);
  --modal-show-transform: none;
  --modal-scale-transform: scale(1.02);
  --modal-transition-duration: 0.3s;
}

Usage

The modal plugin controls hidden content, making it visible on demand via data attributes or JavaScript. It also overrides the default scrolling behavior and generates a .modal-backdrop. This backdrop provides a clickable area for dismissing visible modals when a click occurs outside the modal itself.

Via data attributes

Toggle

To activate a modal without writing JavaScript, set data-bs-toggle="modal" on a controlling element, such as a button. Additionally, include a data-bs-target="#foo" or href="#foo" to specify which modal to toggle.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Dismiss

Achieve dismissal with the data-bs-dismiss attribute on a button within the modal:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

Or use the the additionalon data-bs-target on a button outside the modal:

While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the ARIA Authoring Practices Guide dialog (modal) pattern. Evaluate the risks before proceeding.

Via JavaScript

Use JavaScript in the familiar pattern of Bootstrap’s plugins with full additional TypeScript Support.

A modal can be created with a single line of JavaScript:

const myModal = new hummingbird.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new hummingbird.Modal('#myModal', options)

Options

Options can be provided through data attributes or via JavaScript. When using data-bs-attributes, append the option’s name (e.g., data-bs-animation="{value}"). It is crucial to convert “camelCase” option names to “kebab-case” when passing options via data attributes. For instance, use data-bs-custom-class="beautifier" rather than data-bs-customClass="beautifier".

Modal component support data-bs-config data attribute. This attribute can contain simple component configurations as a JSON string. If an element has both data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456, as separate data attributes override values provided within data-bs-config. Additionally, existing data attributes can also house JSON values, such as data-bs-delay='{"show":0,"hide":150}'.

The ultimate configuration object results from merging data-bs-config, individual data-bs-attributes, and JavaScript objects, where the latest provided key-value pair takes precedence over others.

Name	Type	Default	Description
`backdrop`	boolean \| ‘static’	`true`	Determines whether a modal-backdrop element is included. Alternatively, specifying `static` creates a backdrop that does not close the modal when clicked.
`focus`	boolean	`true`	When initialized, this option places focus on the modal.
`keyboard`	boolean	`true`	This option enables closing the modal when the escape key is pressed.

Methods

All available API methods operate asynchronously, initiating a transition. They complete their return to the caller immediately upon transition commencement, yet prior to its conclusion. Furthermore, any method invoked on a component currently undergoing transition will be disregarded. For more detailed information, consult the JavaScript documentation

Supplying options

Content can be activated as a modal by providing an optional options object.

const myModal = new hummingbird.Modal('#myModal', {
  keyboard: false
})

Method	Description
`dispose`	Destroys a modal element, removing associated data from its DOM element.
`getInstance`	A static method for retrieving the modal instance linked to a specific DOM element.
`getOrCreateInstance`	A static method for either retrieving an existing modal instance associated with a DOM element or creating a new one if it has not been initialized.
`handleUpdate`	Allows for manual adjustment of the modal’s position if its height changes while open, such as when a scrollbar becomes visible.
`hide`	Manually conceals a modal, returning control to the caller before the modal is actually hidden (i.e., before the `hidden.bs.modal` event occurs).
`show`	Manually reveals a modal, returning control to the caller before the modal is actually shown (i.e., before the `shown.bs.modal` event occurs). A DOM element can also be passed as an argument, which will be accessible in modal events via the `relatedTarget` property. For example: `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Manually switches the state of a modal (between shown and hidden), returning control to the caller before the modal is actually shown or hidden (i.e., before the `shown.bs.modal` or `hidden.bs.modal` event occurs).

Events

The modal class provides a series of events for integrating with modal functionality. All modal events are triggered directly on the modal element itself (i.e., on the <div class="modal">).

Event	Description
`hide.bs.modal`	This event triggers immediately upon the `hide` instance method’s invocation. It can be prevented by calling `event.preventDefault()`. Refer to the JavaScript events documentation for further details on event prevention.
`hidden.bs.modal`	This event triggers after the modal has completed its transition to a hidden state from the user’s view (it awaits the completion of CSS transitions).
`hidePrevented.bs.modal`	This event triggers when a modal is displayed, its backdrop is `static`, and an external click occurs. It also triggers when the escape key is pressed while the `keyboard` option is set to `false`.
`show.bs.modal`	This event triggers immediately when the `show` instance method is called. If the event is caused by a click, the originating clicked element is accessible through the `relatedTarget` property of the event.
`shown.bs.modal`	This event triggers once the modal has become visible to the user (it awaits the completion of CSS transitions). If the event is caused by a click, the originating clicked element is accessible through the `relatedTarget` property of the event.

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // perform actions...
})

hummingbird

Getting Started

Customize

Layout & content

Forms

Components

Modal

Example

Static backdrop

Scrolling long content

Vertically centered

Toggle between modals

Optional sizes

CSS variables

Usage

Via data attributes

Toggle

Dismiss

Via JavaScript

Options

Methods

Supplying options

Events

hummingbird

Getting Started

Customize

Layout & content

Forms

Components

Modal

Example

Static backdrop

Scrolling long content

Vertically centered

Toggle between modals

Optional sizes

Fullscreen modal

CSS variables

Usage

Via data attributes

Toggle

Dismiss

Via JavaScript

Options

Methods

Supplying options

Events