The DOM API relies on
data-* attributes. They all live under the
data-a11y-dialog-* namespace for consistency (with 1’s, not L’s), clarity and robustness. Two attributes are recognised:
idof the dialog element is expected as a value
idof the dialog element is expected as a value; if omitted, the closest parent dialog element (if any) will be the target
The following button will open the dialog with the
your-dialog-id id when interacted with.
<button type="button" data-a11y-dialog-show="your-dialog-id">
Open the dialog
The following button will close the dialog in which it lives when interacted with.
<button type="button" data-a11y-dialog-hide aria-label="Close the dialog">
The following button will close the dialog with the
your-dialog-id id when interacted with. Given that the only focusable elements when the dialog is open are the focusable children of the dialog itself, it seems rather unlikely that you will ever need this but in case you do, well you can.
aria-label="Close the dialog"
Regarding the JS API, it simply consists on
hide() methods on the dialog instance.
// Show the dialog
// Hide the dialog
For advanced usages, there are
destroy() methods. These are responsible for attaching click event listeners to dialog openers and closers. Note that the
create() method is automatically called on instantiation so there is no need to call it again directly.
// Unbind click listeners from dialog openers and closers and remove all bound
// custom event listeners registered with `.on()`
// Bind click listeners to dialog openers and closers