Handles dialog elements, non-dialog containers, inert containers, and open/close triggers.
| Data Attribute | Element | Function |
|---|---|---|
data-dialog="container" |
Parent element of the dialog | Receives an active class when the dialog is open preventing scroll on the document |
data-dialog="inertcontainer" |
Non-dialog content | Sets non-dialog content to inert preventing focus |
data-dialog="open" |
Button that opens the dialog | Binds a click event that searches for the associated dialog (via the data-dialog-target attribute) and opens it settings containers to active |
data-dialog="close" |
Button that closes the dialog | Binds a click event that searches for the associated dialog (via the data-dialog-target attribute) and close it settings containers to their default states. If the user had clicked a data-dialog="open" element their focus returns to it. |
data-dialog-target="[id]" |
Elements that have data-dialog="open" or data-dialog="close" attributes |
Determines which dialog to open or close by ID |
inert-polyfill allows for use the inert attribute
svgxuse allows for use of external svg files on the use element