Accessible Modal Example
This page demonstrates a modal dialog that is closed by default. The button below opens the modal. The button used to open the modal has the class trigger.
Background content should not be reachable while the modal is open. When the modal opens, focus is moved into it and keyboard navigation is trapped inside. Press Escape to close.
There are some interactive elements below to show that focus is kept inside the dialog when it is open:
Example link