Tailwind CSS Modal
The Modal component, often referred to as a Dialog or Popover, is a layer above the page that engages users with content requiring their interaction. It comes with a variety of features, including scrolling behavior, focus management, backdrop styles, multiple sizes, and more, ensuring an enhanced user experience.
Requires JS
Note that this component requires the use of our Overlay plugin, else you can skip this message if you are already using Preline UI as a package.
Heads up!
Theme switching is disabled on this demo page to keep modal previews accurate and consistent. This is intentional and applies only to this demo, it does not affect how themes work in real projects.
Scale transition
Open the modal with a subtle scale transition.
Apply the hs-overlay-animation-target class to the animated panel so the plugin waits for its transitions to finish before closing the modal.
Slide-down transition
Open the modal with a slide-down transition from the top of the viewport.
Static backdrop
Use a static backdrop to prevent the modal from closing when users click outside it.
Scrolling behavior
When modal content grows beyond the available height, you can keep the header and footer fixed while the body scrolls.
These examples show both scroll-inside-body and scroll-in-viewport behavior.
In both modes, the overlay locks page scrolling so interactions stay within the active modal.
Centered modal
Center the modal vertically in the viewport, including a scrollable variation.
Focus management
Use autofocus on an input to move focus to a specific field when the modal opens.
Stacked overlays
Open a second modal above the first when a flow needs layered dialogs instead of replacing the current step.
Fullscreen modal
Use fullscreen modal layouts that either cover the entire viewport or switch back to a centered dialog above a chosen breakpoint.
Custom backdrop color
Use hs-overlay-backdrop-open: utilities to customize the backdrop color when the modal is open.