Examples
On-demand content loading
Click the button to open a modal whose body is fetched from /api/htmx/modal-content.
Documentation
Lazy modal props
Parameters accepted by
{#include components/htmx/lazy-modal id="..." titleText="..." loadUrl="..." /}.
Open it from anywhere with $dispatch('open-modal', 'the-id').
| Name | Type | Default | Description |
|---|---|---|---|
id
|
String | — (required) |
Modal id, matched by the open-modal event.
|
titleText
|
String | — (required) | Modal header title. |
loadUrl
|
String (URL) | — (required) | Endpoint whose HTML response becomes the modal body when it opens. |
size
|
String | — |
PF modal size: sm, md or
lg.
|
Usage
Fetch on open, not on page load. The modal body carries
hx-trigger="intersect once": nothing is requested until the modal becomes visible, and
the single response of server-rendered HTML then stays cached in the DOM. For a modal whose content is known at
render time, use the plain modal component instead.