1. Overlays
  2. Modal

Components

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.

Example

The default form of a modal dialog.

Slide down animation

The default form of a modal dialog with slide down animation.

Slide up animation

The default form of a modal dialog with slide up animation.

Sizes

Modals have four optional sizes.

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.

Vertically centered

Vertically centered modal examples.

Focus management

Pass the autoFocus prop an element ref to focus on a specific element.

Toggle between modals

Toggle between two separate modals.

Stacked Overlays New

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.

Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport.

Custom backdrop color New

Use hs-overlay-backdrop-open: to change the backdrop color.