This example demonstrates a simple, accessible modal dialog that is closed by default. Click the button to open it.
Card A
Some background content to illustrate scroll lock while the modal is open.
Card B
You can close the modal via the close button, overlay click, or the Escape key.
Card C
Focus is trapped inside the modal while it is open.
Card D
Try tabbing through elements for an accessible experience.