# Dialogs
## 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
```
- [`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 `` as a full-screen overlay.
On the client, a button fetches the modal markup:
```html
```
- [`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 ``.
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
Modal Dialog
This is the modal content.
```
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.