130. Modal

Build a Modal component in React that displays content in an overlay and can be opened/closed.

Requirements

1. Modal Overlay

• Dark semi-transparent backdrop covering the screen
• Centered modal content box
• Click outside to close (optional for basic version)

2. Open/Close Functionality

• Button to open modal
• Close button (X) inside modal
• State to control visibility

3. Modal Content

• Title/header section
• Body content area
• Footer with action buttons (optional)

4. Data Structure

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  children: React.ReactNode;
}

Example Usage

<Modal 
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Confirm Action"
>
  <p>Are you sure you want to proceed?</p>
</Modal>