1. Overlays
  2. Modal

Components

Tailwind CSS Modal - Preline UI

A modal dialog displays content that requires user interaction, in a layer above the page.

Requires JS

Basic usage

Example

The default form of a modal dialog.

Animations

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.

Fullscreen Modal

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

JavaScript behavior

Options

Parameters Description Options Default value
data-hs-modal-backdrop-container Backdrop element selector null
data-hs-modal-backdrop When backdrop is set to static, the modal will not close when clicking outside it. static | null null
data-hs-modal-keyboard When set to true, the modal will not close when clicking on ESC keyboard button. true | false true
autofocus Focus the first input in a modal with the autofocus attribute on opening. Must be added to an input element inside a modal window.

Classes

Name Description
hs-modal Modal content
hs-modal-toggle Modal toggle

Methods

The HSModal object is contained within the global window object

Method Description
HSModal.open($modalEl) Open modal
HSModal.close($modalEl) Close modal
HSModal.toggle($modalEl) Toggle modal

Events

Method Description
open.hs.modal Called when modal is open.
close.hs.modal Called when modal is closed.

Open any modal event example.

                  
                    window.addEventListener('open.hs.modal', ($modelEl) => {...})

                    // OR

                    HSModal.on('open', ($modelEl) => {...})
                  
                

Open specific modal event example.

                  
                    $modalEl.addEventListener('open.hs.modal', (evt) => {...})