1. Plugins
  2. Modal


Tailwind CSS Modal

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

Image Description


To get started, install Overlay plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                        npm i @preline/overlay


The default form of a modal dialog.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                        <button type="button" data-hs-overlay="#hs-unstyled-modal">
                          Open modal

                        <div id="hs-unstyled-modal" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
                          <div class="hs-overlay-open:opacity-100 hs-overlay-open:duration-500 opacity-0 transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                            Modal content


Parameters Description Options Default value
data-hs-overlay-backdrop-container Backdrop element selector null
[--overlay-backdrop:*] When backdrop is set to static, the modal will not close when clicking outside it. static | null null
[--auto-hide:*] Milliseconds for auto-closing a modal.When set to 0, the modal will not close. number 0
[--body-scroll:*] When set to false, the body scroll will be hidden as soon as the modal opens. true | false true
data-hs-overlay-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.


Name Description
hs-overlay Modal content
hs-overlay-open Modal open
hs-overlay-toggle Modal toggle
hs-overlay-backdrop-open Modal backdrop open


The HSOverlay object is contained within the global window object

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


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

Open any modal event example.

                        window.addEventListener('open.hs.overlay', ($overlayEl) => {...})

                        // OR

                        HSOverlay.on('open', ($overlayEl) => {...})

Open specific modal event example.

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

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Image Description
Check out Preline UI Modals