Modal Dialog

Build a reusable modal dialog: a button opens an overlay with a card on top of the page, and a close button (or Cancel) dismisses it. This is the foundation of the modal family — here the whole job is open/close state and conditional rendering. Later questions add the ARIA contract, backdrop/Escape dismissal, and focus management; get the open/close right first.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A trigger button; while open, a backdrop + a dialog card with a title, body, and close controls.

Examples

initial:        page shows the "Open dialog" button only
click Open:     backdrop + dialog appear over the page
click × / Cancel / Subscribe:  dialog closes, back to the button

The dialog is rendered ONLY while open — it isn't in the DOM when closed.
`open` (a boolean in state) is the single source of truth.

Notes

• Open is state. A boolean in useState decides whether the dialog shows. The trigger sets it true; the close controls set it false.
• Conditional render, don't CSS-hide. Render the modal with {open && <…>} so it's absent from the DOM when closed — cleaner than always mounting it and toggling display.
• The backdrop covers the page. A position: fixed; inset: 0 overlay centres the dialog and dims everything behind it.
• Out of scope. ARIA roles, backdrop-click / Escape to close, and focus trapping — those are Modal Dialog II, III, and IV. Here it's just open and close.