Modal

Dialog overlay that requires user attention or interaction.

Source Tailwind Javascript

Installation

  1. Install the component

    templui add modal
  2. Add the JavaScript to your layout

    @modal.Script()
    

    Call this template in your base layout file (e.g., in the <head> section).

API Reference

Required parameter
Hover for description

Trigger

Element that triggers the modal to open.

Name Type Default
ID
string
""
Class
string
""
Attributes
templ.Attributes
nil
Disabled
bool
false
For
string
""

Close

Element that closes the modal.

Name Type Default
ID
string
""
Class
string
""
Attributes
templ.Attributes
nil
For
string
""

Body

Body/content section of the modal.

Name Type Default
ID
string
""
Class
string
""
Attributes
templ.Attributes
nil