Accessible Modal Stack Manager

Focus trapping,
done right.

A production-grade modal engine using WeakMap for private state, inert for background lockout, proper ARIA orchestration, scroll preservation, and correct focus restoration across N stacked layers.

Live Demos

Click any button — inspect the panel ←
⬡
Single Modal

Basic modal with focus trap, scroll lock, ARIA roles, and Escape key dismissal.

⬡⬡
Stacked Modals

Open modal from inside a modal — focus correctly jumps between layers on close.

✎
Form Modal

Modal with form, select, textarea. Tab cycles only within the modal boundary.

⚠
Confirm Dialog

Destructive action dialog. role="alertdialog", first focus on safe action.

⟳
Detached Trigger

Trigger button removed from DOM after click — focus still restored to nearest valid ancestor.

⬡⬡⬡
Deep Stack (×4)

Opens 4 modals programmatically. Escape collapses them one by one, restoring focus each time.

Programmatic Control

Call the engine API directly from the console: window.modalStack

modalStack.open(id)opens modal by id
modalStack.close(id?)closes top or by id
modalStack.closeAll()collapses entire stack
modalStack.getStack()returns ordered array
modalStack.onOpen(fn)lifecycle hook
modalStack.onClose(fn)lifecycle hook
Keyboard Reference
TabMove focus forward (wraps at boundary)
Shift+TabMove focus backward (wraps at boundary)
EscClose topmost modal, restore prior focus
EnterActivate focused button / submit form
SpaceActivate buttons, toggle checkboxes