htmx 4.0 is under construction — migration guide

Dialogs

Show modals and popups on demand

Browser native dialogs

The simplest approach uses hx-confirm to trigger a native browser prompt before sending a request.

On the client, add hx-confirm to any element that makes a request:

<button hx-post="/submit"
        hx-confirm="Are you sure?"
        hx-target="#response">
  Prompt Submission
</button>
  • hx-confirm="Are you sure?" shows the browser’s built-in confirm dialog.
  • The AJAX request only fires if the user clicks OK. No extra HTML or CSS required.

Custom modals

htmx makes it straightforward to build modals from scratch. A button loads remote content and appends it to <body> as a full-screen overlay.

On the client, a button fetches the modal markup:

<button hx-get="/modal"
        hx-target="body"
        hx-swap="beforeend">
  Open a Modal
</button>

On the server, respond with the full modal markup. Hyperscript handles the close animation — adding a .closing class, waiting for the CSS transition to finish, then removing the element:

<div id="modal"
     _="on closeModal add .closing
        wait for animationend
        then remove me">
  <div class="modal-underlay"
       _="on click trigger closeModal">
  </div>
  <div class="modal-content">
    <h1>Modal Dialog</h1>
    <p>This is the modal content.</p>
    <button _="on click trigger closeModal">
      Close
    </button>
  </div>
</div>

Click the underlay or the Close button to dismiss.

Notes

CSS frameworks like Bootstrap and UIKit ship their own modal components. htmx works with these too — use hx-get to load modal content into a framework-provided container, and trigger the framework’s show/hide methods via JavaScript or Hyperscript.