Modal dialog example

This page demonstrates an accessible modal dialog pattern. The modal is closed by default. Open it with the button below (the opener has the class "trigger"). While the modal is open, background content is hidden from assistive technology and focus is constrained inside the dialog.

Example long text to verify reflow and wrapping at small widths: a-very-long-string-without-spaces-like-a-really-long-URL-or-token-should-wrap-correctly-and-not-cause-horizontal-scrolling-when-the-viewport-is-narrow.

Open example dialog