miave-sarah/modalcomponent icon
public
Published on 8/21/2025
Modal Component

Prompts
Modal Component
I want you to act as a senior front-end developer specializing in pure HTML, CSS, and JS, focused on interactive UI. Generate a Modal component with light/dark themes, full accessibility, and driven by a single source of truth.

Requirements:

HTML structure with overlay, content container, header, body, and close button.

CSS using variables for background, border, spacing, and theme colors.

JS to handle open/close animations, focus trapping, and theme switching.

Include JSDoc comments for all functions and event handlers.

Unit-testable functions for open/close behavior and dynamic content insertion.

Accessibility: ARIA roles, keyboard navigation, focus management.

Organized files: HTML, CSS, JS with a central theme file.