ContextQMD
Back to Daisyui

Modal

packages/docs/src/routes/(routes)/components/modal/+page.md

5.5.1911.6 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

There are 3 methods to use modals

  1. Using HTML <dialog> element
    It needs JS to open but it has better accessibility and we can close it using Esc key
  2. Using checkbox
    A hidden <input type="checkbox"> to control the state of modal 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

:INFO:

Opening a modal adds a scrollbar-gutter to the page to avoid layout shift on operating systems that have a fixed scrollbar. On recent Chromium based browsers vertical scrollbar presence is detected automatically. On Safari and on mobile devices the scrollbar is displayed as overlay so there will not be gutter. On Firefox you need to detect the presence of vertical scrollbar and set the scrollbar-gutter: stable or scrollbar-gutter: unset on :root element yourself. If you don't want to use this feature, you can exclude rootscrollgutter.

HTML dialog element is a native way to create modals. It is accessible and we can close the modal using Esc key.
We can open the modal using JS ID.showModal() method and close it using ID.close() method.
The ID must be unique for each modal.

~Dialog modal

opens on click using ID.showModal() method. can be closed using ID.close() method

<button class="btn" onclick={() => my_modal_1.showModal()}>open modal</button>

<dialog id="my_modal_1" class="modal"> <div class="modal-box"> <h3 class="font-bold text-lg">Hello!</h3> <p class="py-4">Press ESC key or click the button below to close</p> <div class="modal-action"> <form method="dialog"> <!-- if there is a button in form, it will close the modal --> <button class="btn">Close</button> </form> </div> </div> </dialog>
html
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_1.showModal()">open modal</button>
<dialog id="my_modal_1" class="$$modal">
  <div class="$$modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="$$modal-action">
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <button class="$$btn">Close</button>
      </form>
    </div>
  </div>
</dialog>
jsx
<button className="$$btn" onClick={()=>document.getElementById('my_modal_1').showModal()}>open modal</button>
<dialog id="my_modal_1" className="$$modal">
  <div className="$$modal-box">
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Press ESC key or click the button below to close</p>
    <div className="$$modal-action">
      <form method="dialog">
        <button className="$$btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

~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

<button class="btn" onclick={() => my_modal_2.showModal()}>open modal</button>

<dialog id="my_modal_2" class="modal"> <div class="modal-box"> <h3 class="font-bold text-lg">Hello!</h3> <p class="py-4">Press ESC key or click outside to close</p> </div> <form method="dialog" class="modal-backdrop"> <button>close</button> </form> </dialog>
html
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_2.showModal()">open modal</button>
<dialog id="my_modal_2" class="$$modal">
  <div class="$$modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click outside to close</p>
  </div>
  <form method="dialog" class="$$modal-backdrop">
    <button>close</button>
  </form>
</dialog>
jsx
<button className="$$btn" onClick={()=>document.getElementById('my_modal_2').showModal()}>open modal</button>
<dialog id="my_modal_2" className="$$modal">
  <div className="$$modal-box">
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Press ESC key or click outside to close</p>
  </div>
  <form method="dialog" className="$$modal-backdrop">
    <button>close</button>
  </form>
</dialog>

~Dialog modal with a close button at corner

<button class="btn" onclick={() => my_modal_3.showModal()}>open modal</button>

<dialog id="my_modal_3" class="modal"> <div class="modal-box"> <form method="dialog"> <!-- if there is a button in form, it will close the modal --> <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button> </form> <h3 class="font-bold text-lg">Hello!</h3> <p class="py-4">Press ESC key or click on ✕ button to close</p> </div> </dialog>
html
<!-- You can open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_3.showModal()">open modal</button>
<dialog id="my_modal_3" class="$$modal">
  <div class="$$modal-box">
    <form method="dialog">
      <button class="$$btn $$btn-sm $$btn-circle $$btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click on ✕ button to close</p>
  </div>
</dialog>
jsx
<button className="$$btn" onClick={()=>document.getElementById('my_modal_3').showModal()}>open modal</button>
<dialog id="my_modal_3" className="$$modal">
  <div className="$$modal-box">
    <form method="dialog">
      <button className="$$btn $$btn-sm $$btn-circle $$btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Press ESC key or click on ✕ button to close</p>
  </div>
</dialog>

~Dialog modal with custom width

You can use any w-* and max-w-* utility class to customize the width

<button class="btn" onclick={() => my_modal_4.showModal()}>open modal</button>

<dialog id="my_modal_4" class="modal"> <div class="modal-box w-11/12 max-w-5xl"> <h3 class="font-bold text-lg">Hello!</h3> <p class="py-4">Click the button below to close</p> <div class="modal-action"> <form method="dialog"> <!-- if there is a button, it will close the modal --> <button class="btn">Close</button> </form> </div> </div> </dialog>
html
<!-- You can open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_4.showModal()">open modal</button>
<dialog id="my_modal_4" class="$$modal">
  <div class="$$modal-box w-11/12 max-w-5xl">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Click the button below to close</p>
    <div class="$$modal-action">
      <form method="dialog">
        <!-- if there is a button, it will close the modal -->
        <button class="$$btn">Close</button>
      </form>
    </div>
  </div>
</dialog>
jsx
<button className="$$btn" onClick={()=>document.getElementById('my_modal_4').showModal()}>open modal</button>
<dialog id="my_modal_4" className="$$modal">
  <div className="$$modal-box w-11/12 max-w-5xl">
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Click the button below to close</p>
    <div className="$$modal-action">
      <form method="dialog">
        <button className="$$btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

~Responsive

Modal goes bottom on SM screen size, goes middle on MD screen size

<button class="btn" onclick={() => my_modal_5.showModal()}>open modal</button>

<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle"> <div class="modal-box"> <h3 class="font-bold text-lg">Hello!</h3> <p class="py-4">Press ESC key or click the button below to close</p> <div class="modal-action"> <form method="dialog"> <!-- if there is a button in form, it will close the modal --> <button class="btn">Close</button> </form> </div> </div> </dialog>
html
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_5.showModal()">open modal</button>
<dialog id="my_modal_5" class="$$modal $$modal-bottom sm:$$modal-middle">
  <div class="$$modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="$$modal-action">
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <button class="$$btn">Close</button>
      </form>
    </div>
  </div>
</dialog>
jsx
<button className="$$btn" onClick={()=>document.getElementById('my_modal_5').showModal()}>open modal</button>
<dialog id="my_modal_5" className="$$modal $$modal-bottom sm:$$modal-middle">
  <div className="$$modal-box">
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Press ESC key or click the button below to close</p>
    <div className="$$modal-action">
      <form method="dialog">
        <button className="$$btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

Method 2. checkbox legacy

A hidden checkbox can control the state of modal and labels can toggle the checkbox so we can open/close the modal.

~Modal using checkbox

<label for="my_modal_6" class="btn">open modal</label>

html
<!-- The button to open modal -->
<label for="my_modal_6" class="$$btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my_modal_6" class="$$modal-toggle" />
<div class="$$modal" role="dialog">
  <div class="$$modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">This modal works with a hidden checkbox!</p>
    <div class="$$modal-action">
      <label for="my_modal_6" class="$$btn">Close!</label>
    </div>
  </div>
</div>

~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

<label for="my_modal_7" class="btn">open modal</label>

html
<!-- The button to open modal -->
<label for="my_modal_7" class="$$btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my_modal_7" class="$$modal-toggle" />
<div class="$$modal" role="dialog">
  <div class="$$modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">This modal works with a hidden checkbox!</p>
  </div>
  <label class="$$modal-backdrop" for="my_modal_7">Close</label>
</div>

A link adds a parameter to the URL and you only see the modal when the URL has that parameter
When modal is closed, the page will scroll to the top because of the anchor link. Anchor links might not work well on some SPA frameworks. If there are problems, use the other methods

~Modal using anchor link

<a href="#my_modal_8" class="btn" rel="external">open modal</a>

html
<!-- The button to open modal -->
<a href="#my_modal_8" class="$$btn">open modal</a>

<!-- Put this part before </body> tag -->
<div class="$$modal" role="dialog" id="my_modal_8">
  <div class="$$modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">This modal works with anchor links</p>
    <div class="$$modal-action">
      <a href="#" class="$$btn">Yay!</a>
    </div>
  </div>
</div>