Dialogs Bootstrap
Demonstrates modal dialogs using UIKit
Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes. This example shows how to use HTMX alongside original JavaScript provided by Bootstrap.
We start with a button that triggers the dialog, along with a DIV at the bottom of your markup where the dialog will be loaded:
```
@app.get
def page():
return Div()(
Button(
"Open Modal",
hx_get=modal,
hx_target="#modals-here",
data_bs_toggle="modal",
data_bs_target="#modals-here",
cls="btn btn-primary",
),
Div(id="modals-here", cls="modal modal-blur fade", style="display:none")(
Div(cls="modal-dialog modal-lg modal-dialog-centered", role="document")(Div(cls="modal-content"))
),
)
```
This button uses a GET request to /modal when this button is clicked. The contents of this file will be added to the DOM underneath the #modals-here DIV.
The server responds with a slightly modified version of Bootstrap’s standard modal
```
@app.get
def modal():
return Div(cls="modal-dialog modal-dialog-centered")(
Div(cls="modal-content")(
Div(cls="modal-header")(H2("Modal title")),
Div(cls="modal-body")("Modal body text goes here."),
Div(cls="modal-footer")(Button("Close", cls="btn btn-secondary", data_bs_dismiss="modal")),
)
)
```