Dialogs Bootstrap

Demonstrates modal dialogs using UIKit

HOME | Explain | Code | Htmx Docs | Full screen
from fasthtml.common import H2, Button, Div, Link, Script, fast_app

app, rt = fast_app(
    hdrs=[
        Script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"),
        Link(
            rel="stylesheet",
            href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css",
        ),
    ],
    pico=False,
)


@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"))
        ),
    )


@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")),
        )
    )

Server Calls