Modal

A modal is a window on top of the page that asks for a response: confirm enrolling in a course, enter data, read a warning. While it is open, the rest of the page is dimmed and unavailable. daisyUI styles the standard HTML <dialog> tag for this.

The window and the open button

The <dialog> tag gets the modal class, and the window content goes into a modal-box block. The window is opened with showModal() — a built-in method of the <dialog> element:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="min-h-72 p-4">
  <button class="btn btn-primary" onclick="document.getElementById('enroll').showModal()">
    Enroll
  </button>
</div>
 
<dialog id="enroll" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Course enrollment</h3>
    <p class="py-4">"HTML basics" for $19. Access opens right after payment.</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

Click "Enroll" — the page dims and a white window appears in the middle. You can close it with the "Close" button or the Escape key.

How closing works

A form with method="dialog" is a feature of the <dialog> tag: submitting such a form closes the window, and no request goes to the server. That is why any button inside this form closes the window. modal-action is the component part that pushes buttons to the right edge.

Class	What it is
`modal`	The `<dialog>` itself: dimming and centering
`modal-box`	The white window with padding
`modal-action`	The row of buttons at the bottom
`modal-backdrop`	An invisible layer; clicking it closes the window

Closing on a backdrop click

To close the window when someone clicks outside it, add a second form with the modal-backdrop class after modal-box:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="min-h-72 p-4">
  <button class="btn" onclick="document.getElementById('info').showModal()">About the course</button>
</div>
 
<dialog id="info" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">JavaScript from scratch</h3>
    <p class="py-4">24 lessons and 40 tasks. Click outside the window to close it.</p>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>Close</button>
  </form>
</dialog>

The backdrop covers the whole screen under the window, and its button is invisible — a click anywhere around the window closes it.

Window placement

The modal-bottom modifier pins the window to the bottom of the screen — on a phone it is easier to reach with a thumb. With a Tailwind prefix you switch back to the usual placement on larger screens: class="modal modal-bottom sm:modal-middle".

Common mistake

Adding a "Close" button without a form:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="min-h-60 p-4">
  <button class="btn" onclick="document.getElementById('broken').showModal()">Open</button>
</div>
 
<dialog id="broken" class="modal">
  <div class="modal-box">
    <p>Try closing this window with the button.</p>
    <div class="modal-action">
      <button class="btn">Close</button>
    </div>
  </div>
</dialog>

Clicking "Close" does nothing — only Escape removes the window: a plain button knows nothing about it. Put buttons that should close the window inside <form method="dialog">, or call document.getElementById('enroll').close() in a handler.

Thanks for reading!