Interactive Modal Dialog

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

Modal dialogs are the standard mechanism for alerts, custom form entries, and confirmation screens. The Interactive Modal Dialog challenge requires you to build a modal popup layout. Clicking the trigger button must fade in the overlay; clicking the close button or clicking the darkened backdrop overlay must close the dialog and restore the page view.

To implement this successfully, pay special attention to transition opacity triggers and display states.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Open trigger button with ID #open-modal-btn.
Close trigger button with ID #close-modal-btn.
Modal overlay container with ID #modal-overlay.
Clicking #open-modal-btn shows #modal-overlay (remove hidden class or transition opacity).
Clicking #close-modal-btn or the #modal-overlay backdrop area directly must hide it.

Example Demo

User Flow

Step-by-step Flow Explanation:

Open Modal: User clicks the 'Open Dialog' trigger button, displaying the modal and backdrop.
Close Button Action: User clicks the inner 'Close' button, immediately hiding the modal dialog.
Backdrop Action: User re-opens the modal, then clicks directly on the darkened backdrop area outside the content box to dismiss it.

Related UI Challenges

Component UI

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#open-modal-btn, #close-modal-btn, #modal-overlay)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution
Interactive JavaScript logic and event listeners are implemented	Pending	Pending execution