Simple Modal

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.

---