Challenge

Modal Dialog

Medium

javascript
dom
accessibility

Add a button that opens a modal dialog over the page. The dialog sits on a darkened backdrop. It closes from its own close button, and it also closes when the backdrop is clicked.

Notes:

The starter has #open-btn and an .overlay (#overlay) that holds the .modal. The overlay should be hidden until the button is clicked.

Check your work against

A trigger button opens the modal
The modal overlays the page with a darkened background
Clicking a close (×) button closes it
Clicking the overlay background (outside the dialog box itself) also closes it

No automatic grading

Check your work against the list above, then compare it with the solution preview.

Tab indents. Press Esc, then Tab to leave the editor.

Live preview

Starter loaded. The preview updates as you type.