Tailwind CSS Modal

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

Installation

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

Example

The default form of a modal dialog.

Copy

                          
                            <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-lg border border-transparent font-semibold bg-white text-slate-800 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:bg-slate-800 dark:text-white dark:focus:ring-offset-gray-800" data-hs-overlay="#hs-basic-modal">
                              Open modal
                            </button>

                            <div id="hs-basic-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">
                                <div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
                                  <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
                                    <h3 class="font-bold text-gray-800 dark:text-white">
                                      Modal title
                                    </h3>
                                    <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-sm dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800" data-hs-overlay="#hs-basic-modal">
                                      <span class="sr-only">Close</span>
                                      <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
                                      </svg>
                                    </button>
                                  </div>
                                  <div class="p-4 overflow-y-auto">
                                    <p class="mt-1 text-gray-800 dark:text-gray-400">
                                      This is a wider card with supporting text below as a natural lead-in to additional content.
                                    </p>
                                  </div>
                                  <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-gray-700">
                                    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-overlay="#hs-basic-modal">
                                      Close
                                    </button>
                                    <a class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
                                      Save changes
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div>

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
                        </button>

                        <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
                          </div>
                        </div>

JavaScript behavior

Options

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.

Classes

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

Methods

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

Events

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.

Check out Preline UI Modals

Tailwind CSS Modal

On this page