Example: Accessible Modal Dialog

This page demonstrates a modal dialog component. The modal is closed by default. Click the button below (it has class="trigger") to open the modal.

Open modal Another trigger

Background content outside the modal is marked with aria-hidden while the modal is open. Use Escape to close, or click the overlay. Tab is trapped inside when the modal is open.