- Components
- Modal
Overlays
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.
Scale animation
Experience the classic modal dialog with an engaging scale animation effect.
Apply the hs-overlay-animation-target class to observe the target element's animation. The plugin will then monitor all transitions of these elements until they're complete before hiding the popup.
Static backdrop
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
Scrolling behavior
Modal dialogs differ in width, whereas height is determined by the content. Once it reaches a certain threshold, the body content will scroll while the header and footer remain fixed until the bottom of the modal dialog is reached.
The scroll behavior of modals can be configured so that scrolling happens inside the modal body or outside the modal, within the viewport.
In either case, modals prevent the window from being scrolled both natively and programatically. This will prevent browser issues such as scrollIntoView scrolling the window instead of only the closest scroll parent.
Stacked Overlays
Stacked Overlays modals represent a design approach in user interfaces, where several overlay windows, known as modals, are layered on top of one another. This is commonly seen in web or mobile application interfaces.
