Dialog Toggle Examples
Demonstrating smart dialog detection and toggle functionality in LokaScript.
1. Non-Modal Dialog (Default) show()
Default behavior uses show() for non-modal dialogs. Page remains interactive.
<button _="on click toggle #infoDialog">Toggle Info</button>
<dialog id="infoDialog">
<button _="on click toggle #infoDialog">Close</button>
</dialog>
Try clicking outside the dialog - page stays interactive!
2. Modal Dialog showModal()
Use modal parameter to open with showModal(). Blocks page interaction.
<button _="on click toggle #confirmDialog modal">Open Modal</button>
<dialog id="confirmDialog">
<button _="on click toggle #confirmDialog">Close</button>
</dialog>
Modal dialogs block interaction with the page and have a backdrop.
3. Form Dialog with Submission
Dialog with a form that closes on submit.
<button _="on click toggle #formDialog modal">Open Form</button>
<dialog id="formDialog">
<form _="on submit
halt the event
then toggle #formDialog
then log 'Form submitted: ' + my.name.value">
<input name="name" required>
<button type="submit">Submit</button>
</form>
</dialog>
Form submission closes the dialog automatically.
4. Multiple Dialogs
Toggle multiple dialogs independently.
Each dialog can be toggled independently.
5. Chaining with Other Actions
Toggle dialogs and chain with other hyperscript commands.
<button _="on click
toggle #chainDialog modal
then wait 100ms
then log 'Dialog toggled!'">
Open with Logging
</button>
Status: Ready
Summary
Syntax Reference
| Syntax |
Method |
Behavior |
toggle #myDialog |
show() |
Non-modal (default, safer) |
toggle #myDialog modal |
showModal() |
Modal (blocks page) |
toggle #myDialog |
close() |
Close dialog (from inside or outside) |
Key Points
- Default is non-modal:
toggle #dialog uses show()
- Explicit modal: Add
modal parameter for showModal()
- Backward compatible: Class/attribute toggle still works on dialogs
- Accessibility: Non-modal is safer for screen readers
- Smart detection: Automatically detects
<dialog> elements