Simple Modal Example

This is a basic modal with a title, content, and a close button. Click the button below to open it.

<div data-controller="modal">
  <button data-action="click->modal#open">Open Simple Modal</button>

  <dialog data-modal-target="dialog">
    <article>
      <header>
        <button aria-label="Close" rel="prev" data-action="click->modal#close"></button>
        <h3>Welcome!</h3>
      </header>

      <ul>
        <li>Close by: clicking the X button in the header</li>
        <li>or by clicking the Close button below</li>
        <li>or by pressing the ESC key</li>
        <li>or by clicking outside the modal (on the backdrop)</li>
      </ul>

      <button type="button" data-action="click->modal#close">Close</button>
    </article>
  </dialog>
</div>