Dialogs Custom

from fasthtml.common import H2, Button, Div, Hr, Link, Script, fast_app

app, rt = fast_app(
    hdrs=[
        Link(rel="stylesheet", href="/htmx_dialogs_custom.css"),
        Script(src="https://unpkg.com/hyperscript.org", defer=True),
    ],
    pico=False,
)


@app.get
def page():
    return Div()(
        Button("Open a Modal", hx_get=modal, hx_target="body", hx_swap="beforeend", cls="btn primary"),
    )


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

Server Calls