eink-ui

Native dialog element

E-Ink rationale: The native <dialog> element is the correct semantic choice for modal content. On E-Ink devices, modals should be used sparingly because each open/close triggers a full page repaint. The ::backdrop is styled with a semi-transparent overlay to dim the background.

Note on interactivity: Opening and closing a dialog requires JavaScript (dialog.showModal() / dialog.close()). Since this library is CSS-only, the demos below show dialogs in their open state using the open HTML attribute. In production, you would call .showModal() to display the dialog with its backdrop overlay.

Interactive trigger with polyfill

Use data-dialog-target to open a dialog by id and data-dialog-close to close. The included eink-ui.dialog.polyfill.js enables the same behavior on browsers that lack native <dialog> support.

Simple confirmation dialog

Shown inline with the open attribute. In production, this would appear as a centered modal with a backdrop.

Dialog with form content

Dialogs can contain form fields. Use method="dialog" on the form so the submit button closes the dialog natively.

Dialog with scrollable content

For long content, the dialog body scrolls independently.

Theme variants

Dialogs inherit theme tokens from their ancestor's data-theme.

Implementation notes

// Open
document.getElementById('my-dialog').showModal();

// Close
document.getElementById('my-dialog').close();