Dialog

The native dialog on thick glass with a blurred backdrop. Opens with data-open; closes with data-close.

dialog aequitas.js

Examples

Dialog

Small, with data-close

No form here: the button closes the dialog through aequitas.js.

Anatomy

`dialog`	A native `<dialog>` with an `id` for the opener to point at. Thicker frost than a card, padded, at most one measure wide.
`> form[method=dialog]`	Optional. Any submit button inside it closes the dialog and sets `returnValue` to the button's `value`.
`[data-open="#id"]`	The opener, anywhere on the page. Usually a `.btn`.
`[data-close]`	Optional close control inside the dialog, for when it isn't in a `method=dialog` form.

API

Attribute	Values	Description
`data-size`	`slfull`	Width: `s` is about 29rem, `l` a full container, `full` covers the viewport edge to edge. Default one measure.
`data-light-dismiss`	boolean	A click on the backdrop closes the dialog (aequitas.js).
`data-open`	`<selector>`	On the opener: aequitas.js calls `showModal()` on the dialog the selector finds.
`data-close`	`<value>`	On a control inside: closes the nearest dialog, passing the value (if any) as `returnValue`.
`open`	boolean	Set by the browser while shown; the dialog fades and springs in, the backdrop blurs.

Behaviour

Clicking a [data-open="#id"] element calls showModal() on that dialog, a [data-close] element closes the dialog it sits in, and data-light-dismiss closes on a backdrop click. Without it, call showModal() and close() yourself; a method=dialog form and Esc still close it.

From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.

Accessibility

Label the dialog: aria-labelledby pointing at its heading, or aria-label.
showModal() moves focus into the dialog and back to the opener on close. Put autofocus on the control that should take focus first.
Always leave a visible way out (a cancel or close button); backdrop clicks are not discoverable and do nothing without data-light-dismiss.

Key	Effect
`Esc`	Closes the modal dialog (native).
`Tab` / `ShiftTab`	Moves through the dialog's controls; the page behind is inert while it is open.