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 buttons
modal-toggle Component For checkbox that controls modal
modal-open
Modifier
Add/remove this class to open/close the modal using JS
modal-bottom
Responsive
Moves the modal to bottom
modal-middle
Responsive
Moves the modal to middle (default)
# Modal using label + hidden checkbox
Make sure each modal you use, has a unique ID. In this example, ID is "my-modal".
# 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
# Modal using label + hidden checkbox with a close button at corner
# Modal that closes when clicked outside
Modal works with a hidden checkbox and labels can toggle the checkbox so we can use a label tag for the whole modal and use another label for modal-box to prevent closing when modal-box is clicked
# Modal with custom width
We remove max-width so we can use a custom size
# Responsive: Modal goes bottom on mobile screen and goes middle on desktop
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

Make your React site visually editable

Become a sponsor

Congratulations random Internet user!

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

Congratulations random Internet user!

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

Congratulations random Internet user!

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

Congratulations random Internet user!

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