cnc-modal
Overview
Spec
Examples
Playground
Styling
cnc-modal
An accessible native dialog with responsive sizes, managed focus, configurable dismissal, stack-aware behavior, and a cancelable close lifecycle.
Properties
| API | Purpose |
|---|---|
open |
Controls visibility directly or through $open. |
anchor |
Selector or element used as the modal-owned opener. |
trigger |
click
by default; also supports touch, mouseenter/hover, and manual.
|
label |
Accessible dialog name and visible title. |
size |
sm, md, lg, or full.
|
initialFocus |
Selector focused after opening. |
closeOnEscape / closeOnBackdrop |
Enable or disable implicit dismissal. |
animation |
smooth by default; use none to disable. |
data-modal-close |
Declarative action whose value becomes the close reason. |