131. Modal II

Build an enhanced Modal component with smooth animations and support for nested modals.

Requirements

1. Smooth Animations

• Fade-in/fade-out animation for overlay
• Slide-up animation for modal content
• Configurable animation duration
• Support for different animation types (fade, slide, scale)

2. Nested Modals

• Support opening a modal from within another modal
• Proper z-index stacking (each nested modal has higher z-index)
• Close only the topmost modal when clicking outside or pressing Escape
• Visual indication of modal depth (optional: backdrop darkening)

3. Animation States

• Handle enter/exit animations properly
• Prevent content flash during animation
• Support animation callbacks (onAnimationStart, onAnimationEnd)

4. Enhanced Features

• Size variants (small, medium, large, fullscreen)
• Custom animation duration
• Prevent closing during animation

5. Data Structure

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  children: React.ReactNode;
  size?: "sm" | "md" | "lg" | "fullscreen";
  animationType?: "fade" | "slide" | "scale";
  animationDuration?: number;
  allowNested?: boolean;
}

Example Usage

<Modal 
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Parent Modal"
  size="md"
  animationType="slide"
>
  <button onClick={() => setNestedOpen(true)}>Open Nested Modal</button>
  <Modal 
    isOpen={nestedOpen}
    onClose={() => setNestedOpen(false)}
    title="Nested Modal"
    size="sm"
  >
    <p>This is a nested modal!</p>
  </Modal>
</Modal>