← Back to Gallery / Intermediate / 06: Native Dialog

Native Dialog Element

Modern, accessible dialogs with the native <dialog> element
Learn how to use HTML's built-in dialog element with hyperscript for cleaner, more accessible modals with automatic focus management and keyboard handling.
dialog native accessibility modern HTML

Why Use Native <dialog>?

✅ Automatic Accessibility: Built-in ARIA roles and keyboard handling
✅ Focus Management: Automatic focus trapping and return
✅ ESC Key Handling: Closes on ESC by default (can be prevented)
✅ Backdrop Support: Native ::backdrop pseudo-element
✅ Simpler Code: No need for manual show/hide class management

Demo 0: Smart Toggle with 'as modal' (Recommended ⭐)

⭐ Smart Toggle

Clean, declarative dialog control!

LokaScript automatically detects <dialog> elements and provides smart toggle with mode support:

  • ✅ toggle #dialog → Non-modal (show/close)
  • ✅ toggle #dialog modal → Modal (showModal/close)
  • ✅ toggle #dialog → Close either mode

Cleaner than JavaScript onclick handlers.

Demo 1: Using Call Command

ℹ️ Information

Welcome to Native Dialog Elements!

This dialog uses the HTML5 <dialog> element with built-in accessibility and keyboard support.

Press ESC or click outside to close.

Demo 2: Form Dialog with Return Value

👤 New User

Demo 3: Non-Modal Dialog

Non-modal dialogs don't block interaction with the page

📌 Non-Modal

This is a non-modal dialog opened with show() instead of showModal().

You can still interact with the page behind it!

Demo 4: Close on Backdrop Click

🎯 Click Outside

Click the backdrop (dark area outside) to close this dialog.

This works by checking if event.target is the dialog element itself (not a child element).

The Code

✅ Implementation Options:
LokaScript provides multiple ways to work with native <dialog> elements:

1. Smart Toggle with Modal Mode (Recommended ⭐): LokaScript automatically detects dialog elements:
toggle #myDialog - Opens/closes in non-modal mode using show()/close()
toggle #myDialog modal - Opens/closes in modal mode using showModal()/close()
toggle #myDialog - Closes either modal or non-modal dialogs

2. Call Command (Direct Control): Hyperscript's call command supports native methods:
call #myDialog.showModal() - Open as modal (blocks page, traps focus)
call #myDialog.show() - Open as non-modal (page stays interactive)
call #myDialog.close() - Close the dialog

3. JavaScript onclick: Traditional approach also works, but not necessary

The smart toggle approach with modal mode provides the cleanest, most declarative syntax!

Option 1: Smart Toggle with Modal Mode (Recommended ⭐):

<!-- LokaScript auto-detects dialog elements --> <button _="on click toggle #my-dialog"> Open Non-Modal Dialog </button> <button _="on click toggle #my-dialog modal"> Open Modal Dialog </button> <dialog id="my-dialog"> <h2>Dialog Title</h2> <p>Content here</p> <button _="on click toggle #my-dialog">Close</button> </dialog>

Option 2: Using Call Command:

<!-- Hyperscript call command works with native methods --> <button _="on click call #my-dialog.showModal()"> Open Dialog </button> <dialog id="my-dialog"> <h2>Dialog Title</h2> <p>Content here</p> <button _="on click call #my-dialog.close()">Close</button> </dialog>

Option 3: JavaScript onclick (Also Works):

<!-- Traditional JavaScript approach --> <button onclick="document.getElementById('my-dialog').showModal()"> Open Dialog </button> <dialog id="my-dialog"> <h2>Dialog Title</h2> <p>Content here</p> <button onclick="document.getElementById('my-dialog').close()">Close</button> </dialog>

Form Dialog with Return Value:

<dialog id="form-dialog"> <form method="dialog"> <input type="text" name="username" /> <button type="submit" value="confirmed">Submit</button> </form> </dialog> <!-- Hyperscript is great for handling events and logic! --> <div _="on close from #form-dialog get #form-dialog set result to it.returnValue if result is 'confirmed' log 'Form submitted!' end"></div>

Close on Backdrop Click:

<!-- Check if click was on dialog itself (backdrop) --> <dialog onclick="if (event.target === this) this.close()"> <!-- Content with stopPropagation to prevent closing --> <div onclick="event.stopPropagation()"> Dialog content </div> </dialog>

Non-Modal Dialog:

<!-- Use show() instead of showModal() --> <button onclick="document.getElementById('my-dialog').show()"> Open Non-Modal </button> <!-- Non-modal allows page interaction --> <dialog id="my-dialog"> Content here </dialog>

Key Differences from Custom Modals:

Browser Support:

The <dialog> element is supported in all modern browsers (Chrome 37+, Firefox 98+, Safari 15.4+, Edge 79+). Use a polyfill for older browsers if needed.

Advanced Patterns (Hybrid JavaScript + Hyperscript):

<!-- Prevent ESC from closing (hyperscript event handling) --> <dialog _="on cancel halt"> <!-- Close after timeout --> <button onclick=" const dialog = document.getElementById('my-dialog'); dialog.showModal(); setTimeout(() => dialog.close(), 3000); ">Open for 3 seconds</button> <!-- Confirm before closing (hyperscript for logic) --> <dialog _="on cancel if not confirm('Close dialog?') halt the event end"> <!-- Store element reference for cleaner code --> <script> const myDialog = document.getElementById('my-dialog'); </script> <button onclick="myDialog.showModal()">Open</button>
← Previous: Custom Modal Next: Advanced Examples →