Modal

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

Class name		 Type
modal Component Container element
modal-box Component The content of modal
modal-action Component Container for modal action buttons
modal-backdrop Component The backdrop that covers the back of modal so we can close the modal by clicking outside
modal-toggle Component 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

Hello!

Press ESC key or click the button below to close

# Dialog modal, closes when clicked outside
there a second form with 'modal-backdrop' class and it covers the screen so we can close the modal when clicked outside

Hello!

Press ESC key or click outside to close

# Dialog modal with a close button at corner

Hello!

Press ESC key or click on ✕ button to close

# Dialog modal with custom width
You can use any w-* and max-w-* utility class to customize the width

Hello!

Click the button below to close

# Responsive
Modal goes bottom on mobile screen and goes middle on desktop

Hello!

Press ESC key or click the button below to close

Method 2: using a hidden checkbox legacy

# Modal using label + hidden checkbox
# Modal that closes when clicked outside
Modal works with a hidden checkbox and labels can toggle the checkbox so we can use another label tag with 'modal-backdrop' class that covers the screen so we can close the modal when clicked outside
# Modal using anchor link
Anchor links might not work well on some SPA frameworks so if there are problems, use the first example
open modal
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

Sponsors

Never google
a command again

Become a sponsor

Hello!

This modal works with a hidden checkbox!

Congratulations random Internet user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!