# Dialogs
<div id="demo-content" class="not-prose demo-container flex justify-center"></div>
## Browser native dialogs
The simplest approach uses [`hx-confirm`](https://four.htmx.org/reference/attributes/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:
```html
<button hx-post="/submit"
hx-confirm="Are you sure?"
hx-target="#response">
Prompt Submission
</button>
```
- [`hx-confirm`](https://four.htmx.org/reference/attributes/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:
```html
<button hx-get="/modal"
hx-target="body"
hx-swap="beforeend">
Open a Modal
</button>
```
- [`hx-get`](https://four.htmx.org/reference/attributes/hx-get) requests `/modal`.
- [`hx-target`](https://four.htmx.org/reference/attributes/hx-target)=`"body"` targets the document body.
- [`hx-swap`](https://four.htmx.org/reference/attributes/hx-swap)=[`"beforeend"`](https://four.htmx.org/reference/attributes/hx-swap#beforeend) appends the response as the last child of `<body>`.
On the server, respond with the full modal markup. [Hyperscript](https://hyperscript.org) handles the close animation -- adding a `.closing` class, waiting for the CSS transition to finish, then removing the element:
```html
<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.
<style>
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes zoomIn { from { transform: scale(0.9) } to { transform: scale(1) } }
@keyframes zoomOut { from { transform: scale(1) } to { transform: scale(0.9) } }
#modal.closing { animation: fadeOut 150ms ease forwards }
#modal.closing > div:last-child { animation: zoomOut 150ms ease forwards }
</style>
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.
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.