TaskBuild a styled <dialog>. dialog { padding: var(--space-lg); border: none; border-radius: var(--radius-lg); max-width: 400px; box-shadow: var(--shadow-lg); }. dialog::backdrop { background: oklch(0 0 0 / 0.5); backdrop-filter: blur(4px); }. dialog h2 { margin: 0 0 var(--space-md); }. dialog .close { position: absolute; top: var(--space-sm); right: var(--space-sm); background: transparent; border: none; font-size: 24px; cursor: pointer; color: var(--text-muted); }. Open the dialog via JS on load.
Capstone 6: Modal/Dialog component
200 XP14 min
Theory
Native <dialog> + custom styling
Recap from HTML A2 lesson 10 β <dialog> is the native modal. Here we STYLE it properly:
- Backdrop dimming + blur.
- Centered, with max-width.
- Smooth open animation.
- Close button in the top-right.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.