Modal
View OriginalModals display focused content that requires user attention or interaction. They support default and alert variants, with optional HTMX and JavaScript actions on buttons.
Goshtoso Component
Go + TemplDefault Modal
Special Offer
As a token of appreciation, we have an exclusive offer just for you. Upgrade your account now to unlock premium features and enjoy a seamless experience.
Alert Modals
Transaction Complete
Your funds transfer was successful. Check your balance for confirmation.
New Update Available
A new version of the application is ready for download. Enhance your experience with the latest features and improvements.
Forgot your password?
Your account will be locked after three unsuccessful login attempts.
Update Required
You are missing critical security updates, putting your system at risk of potential vulnerabilities.
Modal with HTMX Action
Confirm Action
Clicking confirm will send a POST request to the server via HTMX.
Modal with JavaScript Action
Confirm Delete
Are you sure you want to delete this item? This action cannot be undone.
// Default Modal
@modal.Modal(modal.Config{
ID: "offer",
Title: "Special Offer",
Body: "Upgrade your account now to unlock premium features.",
TriggerText: "Open Modal",
PrimaryText: "Upgrade Now",
SecondaryText: "Remind me later",
})
// Alert Modal (Success)
@modal.Modal(modal.Config{
ID: "txComplete",
Title: "Transaction Complete",
Body: "Your funds transfer was successful.",
TriggerText: "Success Modal",
PrimaryText: "Go to My Balance",
Variant: modal.Success,
AlertMode: true,
})
// Modal with HTMX action
@modal.Modal(modal.Config{
ID: "htmxDemo",
Title: "Confirm Action",
Body: "This will send a request to the server.",
TriggerText: "HTMX Modal",
PrimaryText: "Confirm",
SecondaryText: "Cancel",
PrimaryAction: &modal.ButtonAction{
HxPost: "/api/hello",
HxTarget: "#result",
HxSwap: "innerHTML",
},
})
// Modal with JS action
@modal.Modal(modal.Config{
ID: "jsDemo",
Title: "Confirm Delete",
Body: "Are you sure? This cannot be undone.",
TriggerText: "JS Action Modal",
PrimaryText: "Delete",
SecondaryText: "Cancel",
PrimaryAction: &modal.ButtonAction{
OnClick: "alert('Deleted!')",
},
})