Modal

Overlay dialog that is truly modal: focus is trapped inside, the page behind neither scrolls nor is reachable by a screen reader, and on close focus returns to whatever opened it.

Open and close

<div x-data>
  @components.Button(components.ButtonProps{
    Attrs: templ.Attributes{"x-on:click": "$dispatch('open-modal', 'demo-modal')"},
  }) { Open modal }
</div>
@components.Modal(components.ModalProps{ID: "demo-modal", Title: "Confirm action"}) {
  <p>Modal content.</p>
}