Modal Dialog Component

This example demonstrates an accessible modal dialog component. It is closed by default. Use the button below to open it.

Tip: press Escape to close the modal, or click outside the panel.

Example Modal

This is a simple modal dialog. It traps focus while open and returns focus to the triggering element when closed.

Try tabbing through the focusable controls and closing with the Escape key or the close button.