Modal Dialog

Build accessible modal dialogs with keyboard support
Learn how to create modal overlays, handle clicks outside, and implement proper keyboard navigation. Essential for confirmations, forms, and notifications!

modal overlay accessibility keyboard events

Demo 1: Simple Info Modal

Demo 2: Confirmation Dialog

Demo 3: Form Modal

Demo 4: Behavior-Powered Modal

Same modal pattern, but using ClickOutside + FocusTrap behaviors. No manual event wiring — composable, accessible, and self-contained.

The Code

Modal HTML Structure:

<div id="my-modal" class="modal-overlay"> <div class="modal" _="on click halt"> <div class="modal-header"> <h3>Title</h3> <button _="on click hide #my-modal">×</button> </div> <div class="modal-body"> Content goes here </div> <div class="modal-footer"> <button _="on click hide #my-modal">Close</button> </div> </div> </div>

Open Modal:

<button _="on click show #my-modal"> Open Modal </button>

ESC Key to Close:

<div _="on keydown[key=='Escape'] from window hide .modal-overlay"></div>

Click Outside to Close:

<div _="on click from .modal-overlay if target matches .modal-overlay hide .modal-overlay end"></div>

Prevent Close on Modal Click:

<div class="modal" _="on click halt"> ...modal content... </div>

How it works:

show #modal - Displays the modal overlay
hide #modal - Hides the modal overlay
on click halt - Stops click event from bubbling to overlay
keydown[key=='Escape'] - Filters keyboard events by key
target matches .modal-overlay - Checks if click was on overlay

Key Concepts:

Event Bubbling: halt prevents events from propagating
Event Filtering: [key=='Escape'] for specific keys
Global Handlers: from window for window-level events
Target Matching: target matches selector for conditional logic
CSS Display: Modal shown/hidden via CSS display property

CSS Requirements:

/* Initially hidden */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; } /* Shown when .show class added */ .modal-overlay.show { display: flex; align-items: center; justify-content: center; }

Advanced Modal Patterns:

<div class="modal" _="on show get first <button/> in me focus() it on keydown[key=='Tab'] get last focusable element in me if document.activeElement is it halt focus() first focusable element in me end end">  <button _="on click show #notification-modal wait 3s hide #notification-modal"> Show Notification </button>  <button _="on click if #form-modified if confirm('Discard changes?') hide #form-modal end else hide #form-modal end"> Close </button>

With Behaviors (Demo 4):

Behaviors replace manual event wiring with composable, accessible primitives.

<div _="on keydown[key=='Escape'] from window hide .modal-overlay"></div>  <div _="on click from .modal-overlay if target matches .modal-overlay hide .modal-overlay end"></div>  <div class="modal" _="on click halt">

<div class="modal" _="install ClickOutside(active: false) install FocusTrap(active: false) on clickoutside js closeBehaviorModal() end end on keydown[key=='Escape'] js closeBehaviorModal() end end">

Accessibility Best Practices:

Add role="dialog" to modal container
Add aria-modal="true" to indicate modal state
Add aria-labelledby pointing to modal title
Implement focus trap to keep keyboard focus in modal
Return focus to trigger element when modal closes
Support ESC key to close (already implemented)
Prevent body scroll when modal is open

Try it yourself:

Add animations (fade in, slide up)
Implement focus trap for keyboard navigation
Create stacked modals (modal over modal)
Add auto-close timer for notifications
Build a modal manager for multiple modals
Add confirmation before closing with unsaved changes

← Previous: Tabs Next: Advanced Examples →