Full screen overlays from the Kombai gallery: a property developer's photo gallery, a flight app's paywall and a gardening marketplace's job form.
What is a full screen overlay?
A full screen overlay is a layer that fills the entire screen on top of the current page. It hides everything else so people can focus on one thing, like a photo gallery, a plan picker or a multi-step form. A close button takes them straight back to where they were.
- It is modal: nothing behind it can be reached until it closes.
- A close or back control sits in a fixed spot, usually the top corner.
Full screen overlays show up across video player, demo booking, post detail and permission screens.
When to use a full screen overlay
- Media that needs the roomPhotos, floor plans and slides shown as large as the screen allows.
- A focused multi-step taskPosting a job, setting up a campaign or editing a photo.
- A big choiceComparing plans or picking a starting point before going on.
When not to use one
- A quick questionA yes or no answer fits in a dialog.
- Content people link toIf it needs its own URL and history, make it a page.
- An overlay on an overlayClose one before opening another, so people keep their place.
Anatomy of a full screen overlay
This one works. Use the arrows or the Left and Right keys to move between photos, and the close button or Escape to leave.
Loft 4B, Marbleside Quarter
2 bed · 1,318 sq ft · $3,140 a month
Loft 4B photos
1 of 6, Living room
- Closed
- Open
- Keyboard focus
- Header barTitle and where you are
- Close buttonAlways in the same corner
- ContentFills the screen
- NavigationPrevious and next
- Primary actionThe next step, if any
- StatesClosed, open, focus
Full screen overlay variants
We sorted every full screen overlay design in the Kombai gallery and found six patterns. Browse all 50 web and 30 mobile designs.
1. Media viewers
Photo galleries, product images and file previews on a dark backdrop, with arrows, a counter and thumbnails.
2. Plan pickers and paywalls
Tiers side by side or a single offer, with the price, what is included and one button to upgrade.
3. Focused editors
Multi-step forms and editing tools that take over the screen, with Back, Continue or Apply at the edges.
4. Starting choices
A question and a few large options, like what to set up first or what to save toward.
5. Immersive sessions
A breathing exercise, a workout timer or presenter mode, with almost nothing else on screen.
6. Celebrations and confirmations
A finished payment, a new plan or a first milestone, shown big with one button to carry on.
Where full screen overlays show up
Sign up and sign in
Account forms on a blurred or dark backdrop, so nothing competes with the next step.
Booking
Dates, sessions and changes to a stay picked in one focused view, then back to the listing.
Settings and admin
Profile settings, access rules and add-on tools opened over the app without leaving it.
Full screen overlay vs similar components
Build notes
- Build it as a modal dialog: role="dialog", aria-modal="true" and aria-labelledby on its title, or the native <dialog> with showModal().
- Move focus into it on open, keep Tab inside and close it on Escape.
- On close, return focus to the button that opened it, and restore the scroll position.
- Keep the close button in the same corner on every screen of the overlay.
- Ask before closing if people would lose work, like a half-filled form.
- Lock page scroll behind it, so a swipe or wheel never moves the hidden page.
FAQ
What's the difference between a full screen overlay and a modal?
A full screen overlay is a modal that fills the whole screen. A regular modal dialog sits in a window over a dimmed page, so people can still see where they came from.
When should I use a full screen overlay instead of a dialog?
When the content needs the room or the task has several steps, like viewing photos, editing a document or creating a calendar event. Keep short questions and confirmations in a regular dialog.
Should a full screen overlay change the URL?
If people would want to share it, bookmark it or press Back to leave it, like a photo in a gallery, give it a URL. A short task, like a plan picker, can stay without one.
How do people close a full screen overlay?
Give them an obvious control, usually a close or back button in the top corner, plus Escape on desktop. If closing would throw away their work, ask first and offer to save.
Related terms
All glossary terms · Browse 50 web and 30 mobile full screen overlay designs