<.modal id="modal-single-default">
  <h3 class="text-lg font-bold">Hello!</h3>
  <p class="py-4">Press ESC key or click the button below to close</p>
  <.modal_action>
    <form method="dialog">
      <!-- if there is a button in form, it will close the modal -->
      <.button phx-click={JS.exec("data-cancel", to: "#modal-single-default")}>Close</.button>
    </form>
  </.modal_action>
</.modal>

<.modal close_on_click_away id="modal-single-closes-when-click-outside">
  <: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>
  </:modal_box>
</.modal>

<.modal id="modal-single-dialog-modal-without-a-close-button-at-corner">
  <h3 class="text-lg font-bold">Hello!</h3>
  <p class="py-4">Press ESC key or click outside to close</p>
  <.modal_action>
    <form method="dialog">
      <!-- if there is a button in form, it will close the modal -->
      <.button phx-click={JS.exec("data-cancel", to: "#modal-single-dialog-modal-without-a-close-button-at-corner")}>Close</.button>
    </form>
  </.modal_action>
</.modal>

<.modal id="modal-single-dialog-modal-with-custom-width">
  <:modal_box class="w-11/12 max-w-5xl">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <.modal_action>
      <form method="dialog">
        <!-- if there is a button, it will close the modal -->
        <.button phx-click={JS.exec("data-cancel", to: "#modal-single-dialog-modal-with-custom-width")}>Close</.button>
      </form>
    </.modal_action>
  </:modal_box>
</.modal>

<.modal class="modal-bottom sm:modal-middle" id="modal-single-responsive">
  <: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>
    <.modal_action>
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <.button phx-click={JS.exec("data-cancel", to: "#modal-single-responsive")}>Close</.button>
      </form>
    </.modal_action>
  </:modal_box>
</.modal>