28 lines
880 B
Templ
28 lines
880 B
Templ
package components
|
|
|
|
// Modal renders a modal dialog.
|
|
//
|
|
// The <dialog> itself must never be an htmx swap target: swapping its
|
|
// innerHTML would replace the wrapper below (centering + close button) and
|
|
// break the layout. Content is swapped into the inner element with id
|
|
// "<id>-content" instead.
|
|
templ Modal(id string) {
|
|
<dialog
|
|
id={ id }
|
|
class="m-auto backdrop:bg-black/90 bg-transparent p-0 w-full h-full max-w-none max-h-none"
|
|
hx-on::after-swap="if (!this.open) this.showModal()"
|
|
>
|
|
<div class="relative w-full h-full flex items-center justify-center overflow-hidden">
|
|
<button
|
|
class="absolute right-5 top-5 z-10 p-2 text-white"
|
|
hx-on:click="this.closest('dialog').close()"
|
|
>
|
|
X
|
|
</button>
|
|
<div id={ id + "-content" } class="w-full h-full flex items-center justify-center overflow-hidden">
|
|
{ children... }
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
}
|