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 | |
|---|---|---|
| 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:
- Using
<dialog>element: It needs JS to open but it has better accessibility and we can close it using Esc key - Using a hidden
<input type="checkbox">and<label>to check/uncheck the checkbox and open/close the modal - 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
Method 1: using dialog element recommended
# 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
Method 2: using a hidden checkbox legacy
# 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
Method 3: using anchor links legacy
# Modal using anchor link
Anchor links might not work well on some SPA frameworks so if there are problems, use the first example
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
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!