# Modal

Classname	Type	Description
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)

# Dialog modal

<!-- 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>

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

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

# Dialog modal, closes 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>

<button className="btn" onclick="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>

<button btn onclick="my_modal_2.showModal()">open modal</button>
<dialog id="my_modal_2" modal>
  <div modal-box>
    <h3 font-bold text-lg>Hello!</h3>
    <p py-4>Press ESC key or click outside to close</p>
  </div>
  <form method="dialog" modal-backdrop>
    <button>close</button>
  </form>
</dialog>

FloeUI 0.1.8

UnoCSS
^0.61.0 & DaisyUI
^4.12.8