CodeOath
← All challenges

Modal Dialog

Medium
javascriptdomaccessibility

Build a modal dialog: a button that opens an overlay dialog box on top of the page, with a way to close it again.

Support at least two ways to close it — clicking a close button, AND clicking the darkened overlay outside the dialog box.

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

There's no automated grading for UI challenges — self-check against this list, then compare with the solution preview.

Live preview