Example Modal Dialog

This is a small example of an accessible modal dialog implemented with the HTML <dialog> element and a bit of JavaScript. The modal is closed by default. Open it with the button below (has class "trigger").

Open modal Another trigger

Try tabbing while the modal is open — focus is trapped inside. Press Escape to close. Clicking the backdrop also closes the dialog.