Dialogs Custom
Demonstrates modal dialogs from scratch
While htmx works great with dialogs built into CSS frameworks (like Bootstrap and UIKit), htmx also makes it easy to build modal dialogs from scratch. Here is a quick example of one way to build them.
### High Level Plan
We’re going to make a button that loads remote content from the server, then displays it in a modal dialog. The modal content will be added to the end of the <body> element, in a div named #modal.
In this demo we’ll define some nice animations in CSS, and then use some Hyperscript to remove the modals from the DOM when the user is done. Hyperscript is not required with htmx, but the two were designed to be used together and it is much nicer for writing async & event oriented code than JavaScript, which is why we chose it for this example.
Main Page
```
@app.get
def page():
return Div()(
Button("Open a Modal", hx_get=modal, hx_target="body", hx_swap="beforeend", cls="btn primary"),
)
```
Modal HTML Fragment
```
@app.get
def modal():
return Div(id="modal", _="on closeModal add .closing then wait for animationend then remove me")(
Div(cls="modal-underlay", _="on click trigger closeModal"),
Div(cls="modal-content")(
H2("Modal Dialog"),
"This is the modal content. You can put anything here, like text, or a form, or an image.",
Hr(),
Button("Close", cls="btn danger", _="on click trigger closeModal"),
),
)
```
[Here](/htmx_dialogs_custom.css) is the css for this example.