Modal
Use Tailwind's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Basic Modal
Toggle a modal via JavaScript by clicking the button above. You can use modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Borderless Modal
Toggle a Boderless via JavaScript by clicking the button
above. Use
.border-none
with
.hs-slide for BorderLess modal.
Vertically Centered
Add
.flex items-center
to
.hs-vertically
to vertically center the modal.
Disabled Backdrop
You can disable the backdrop by using
.hs-slide-centered-disable
Modal Themes
Use class
.bg-color-num
with your
.hs-modal
to change theme of modal
Modal Sizes
Add class
.hs-modal-{sm|lg|xl|full}
with
.hs-modal
to create a modal with different size.
Modal with Login Form
Created Simple Login Form.
Scrolling long Content
If your content is longer you the page will autmatically adopt a scrollbar
Scrolling long Content Inside Modal
You can also create a scrollable modal that allows scroll the
modal body by adding
.modal-scroll
to
.hs-modal.
Disabled Animation
For modals that simply appear rather than fade in to view,
remove the
.trnasition
class from your modal markup.