Problem Statement
A modal (or dialog box) is a window that overlays the main content of a page. It forces users to interact with it before they can return to the regular application flow.
In this challenge, you will build a basic modal overlay in React. It should open when a button is clicked and close when the user clicks the close button or clicks outside the modal dialog window.
Requirements
Functional
- Open Button: Provide a trigger button that opens the modal.
- Modal Overlay: When open, render a full-screen overlay backdrop with a centered dialog box.
- Close Options:
- Close Button: Clicking a close icon/button inside the modal must close it.
- Click Outside: Clicking on the dark backdrop outside the dialog box must close it.
- Toggled Visibility: The modal must only render or be visible when the active state is open.
Non-Functional
- Ensure clicking inside the dialog box content area does not close the modal.
- Center the dialog box perfectly on the screen using CSS Flexbox or Grid.
Concepts Tested
- Controlling visibility with boolean states (
useState). - Managing DOM event bubbling and propagation (
e.stopPropagation()). - Designing overlay layouts using CSS
fixed, inset, and centering rules.