Modal

Modal is used to show a dialog or a box when you click a button.

Supported on
37+
98+
15.4+
15.4+
Class name
Type
modalComponent Container element
modal-boxComponent The content of modal
modal-actionComponent Container for modal action buttons
modal-backdropComponent The backdrop that covers the back of modal so we can close the modal by clicking outside
modal-toggleComponent For hidden checkbox that controls modal
modal-open
Modifier
Add/remove this class to open/close the modal using JS
modal-top
Responsive
Moves the modal to top
modal-bottom
Responsive
Moves the modal to bottom
modal-middle
Responsive
Moves the modal to middle (default)
There are 3 ways to use a modal:
  1. Using <dialog> element: It needs JS to open but it has better accessibility and we can close it using Esc key
  2. Using a hidden <input type="checkbox"> and <label> to check/uncheck the checkbox and open/close the modal
  3. Using <a> anchor links: A link adds a parameter to the URL and you only see the modal when the URL has that parameter
Make sure you're using unique IDs for each modal
# Dialog modal
opens on click using ID.showModal() method. can be closed using ID.close() method
# Dialog modal, closes when clicked outside
there is a second form with 'modal-backdrop' class and it covers the screen so we can close the modal when clicked outside
# Dialog modal with a close button at corner
# Dialog modal with custom width
You can use any w-* and max-w-* utility class to customize the width
# Responsive
Modal goes bottom on mobile screen and goes middle on desktop

Method 2: using a hidden checkbox legacy

Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details