Modal Dialog Component (Closed by default)

This example demonstrates an accessible modal dialog. Click the button below (it has the class "trigger") to open the modal.

Example Modal

This is an example of a modal dialog. It is closed by default. The first focusable element receives focus when the dialog opens, and focus is trapped inside the dialog while it is open.

Try navigating with Tab and Shift+Tab, and close the dialog with the Escape key or by clicking the overlay or the close button.