Click the trigger in the demo. Overlay fades, panel scales in. Escape, click overlay, or X to close.
A modal (or dialog) is a popup overlay that appears over the page content, requiring the user to interact with it or dismiss it before returning to the main page. Used for: confirmations, forms, image lightboxes, video players, onboarding flows. The background is darkened to direct focus to the modal.
An overlay div covers the entire screen (position:fixed; inset:0) with a dark semi-transparent background. The modal panel sits centered using flex. The panel animates in with a scale + opacity transition. Clicking the overlay or pressing Escape closes it. Focus should be trapped inside the modal while open. Body scroll should lock.
Click the button below to open a real modal. Try Escape, click outside, or the X to close.
Build a modal component that opens when a button is clicked. Overlay: position:fixed, inset:0, background:rgba(0,0,0,0.6), backdrop-filter:blur(4px), z-index:1000. Modal panel: background:white, border-radius:16px, padding:32px, max-width:480px, width:90%, box-shadow:0 25px 50px rgba(0,0,0,0.25). Animate in: transform:scale(0.92) opacity:0 → scale(1) opacity:1, 0.25s ease. Close on: X button top-right, clicking overlay, pressing Escape key. Include a sign-up form inside: heading 'Create your account', email input, password input, primary submit button, and a 'Sign in instead' link. Body scroll should lock when modal is open.