Overlay
Separates the temporary task from the page behind it.
Platform under construction
Modals
Modals interrupt the page. Good modal CSS makes that interruption focused, accessible and easy to escape.
.modal { position: fixed; inset: 0; display: grid; place-items: center; }
.dialog { width: min(100%, 34rem); max-height: calc(100dvh - 2rem); overflow: auto; }
Component mental model
Modals should focus attention without trapping people badly.
A modal creates a temporary task on top of the current page. That power should be used carefully.
Modal styling needs an overlay, a clear panel, a visible close action, controlled width, safe scroll behavior and strong focus styling.
The hard parts are not only visual. Focus management, escape behavior and background interaction must be handled by HTML and JavaScript too.
Dialog
The focused panel where the task happens.
Close action
Users need an obvious way out.
Scroll safety
Long modal content should not break mobile screens.
Visual model
See the parts of the component before styling the surface.
Dimmed
The background becomes secondary.
Focused
The dialog contains one task.
Exit
The user can leave easily.
Safe
Long content stays usable.
Good CSS versus fragile CSS
Modal panel with safe dimensions
.modal {
position: fixed;
inset: 0;
display: grid;
place-items: center;
padding: 1rem;
}
.dialog { width: min(100%, 34rem); max-height: calc(100dvh - 2rem); overflow: auto; }Panel that cannot breathe
.dialog {
position: absolute;
top: 120px;
left: 50%;
width: 900px;
}Rules of thumb
Components need systems, not one-off decoration.
Use fixed overlay
A modal should cover the viewport consistently.
Limit width
Dialogs should not become huge reading surfaces.
Protect viewport height
Use max-height and overflow for long content.
Make close visible
The escape route should not be hidden.
Style focus inside
Interactive elements inside a modal still need focus-visible.
Use sparingly
Do not use modals for ordinary page content.
Production thinking
A component is only good when real content and real states still work.
Why does this matter?
A modal is a strong interruption. Good styling makes it feel intentional; bad styling makes it feel like a trap.
Accessibility
CSS is only part of modal accessibility. Focus trapping, aria, escape handling and background inertness need proper behavior too.
Production note
Test modals with keyboard only, long content, small screens and browser zoom.
SEO note
Do not hide important indexable content only inside modals. Core content should remain available in the page.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change width to 900px and imagine a phone viewport.
- Remove max-height and think about long modal content.
- Move the close button into normal flow and compare clarity.
Practice assignment
Do this before moving to the next lesson.
- Create a modal overlay and dialog panel.
- Limit width and height safely.
- Add a visible close button and focus style.
Try it yourself
Style a safe modal shell
Self-check
Before you continue, prove that you understand Modals.
Answer these questions before moving on. If a state, long label or mobile width breaks the component, the component is not finished yet.
- Can you explain when a modal is appropriate?
- Can you size a modal safely on mobile?
- Can you make the close action obvious?
- Can you explain which modal behavior CSS cannot solve alone?
- Can you avoid putting core page content only inside a modal?
Senior audit upgrade
CSS does not make a modal accessible by itself.
CSS can style the overlay and panel. A real modal also needs focus management, escape behavior, background inertness and correct dialog semantics.
Focus trap
Keyboard focus should stay inside the modal while it is open.
Escape key
Users expect Escape to close most non-destructive dialogs.
aria-modal or dialog
Use proper HTML and JavaScript behavior, not only a styled div.