--- title: "Full screen overlay UI: variants and examples | Kombai" description: "A full screen overlay covers the whole screen with one task or piece of content, then closes back to the page people came from." canonical_url: https://kombai.com/glossary/full-screen-overlay/ author: "The Kombai Team" --- # Full screen overlay A full screen overlay covers the whole screen with one task or piece of content, then closes back to the page people came from. - Also called: fullscreen modal, overlay - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/full-screen-overlay/), [30 mobile designs](https://kombai.com/gallery/mobile/full-screen-overlay/) - [Marbleside Quarter](https://kombai.com/gallery/inspirations/full-screen-overlay-web-41/) (Web) - [Weirmont](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-28/) (Mobile) - [Anacrux](https://kombai.com/gallery/inspirations/full-screen-overlay-web-29/) (Web) ## 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. ## When to use full screen overlay - **Media that needs the room.** Photos, floor plans and slides shown as large as the screen allows. - **A focused multi-step task.** Posting a job, setting up a campaign or editing a photo. - **A big choice.** Comparing plans or picking a starting point before going on. ## When not to use one - **A quick question.** A yes or no answer fits in a dialog. - **Content people link to.** If it needs its own URL and history, make it a page. - **An overlay on an overlay.** Close one before opening another, so people keep their place. ## Anatomy 1. **Header bar**: Title and where you are 2. **Close button**: Always in the same corner 3. **Content**: Fills the screen 4. **Navigation**: Previous and next 5. **Primary action**: The next step, if any 6. **States**: Closed, open, focus ## Variants We sorted every full screen overlay design in the Kombai gallery and found six patterns. ### 1. Media viewers Photo galleries, product images and file previews on a dark backdrop, with arrows, a counter and thumbnails. - [Nectary Stripe Throw](https://kombai.com/gallery/inspirations/full-screen-overlay-web-47/) (Web) - [Remontoir](https://kombai.com/gallery/inspirations/full-screen-overlay-web-4/) (Web) - [Briar Mill Lofts](https://kombai.com/gallery/inspirations/full-screen-overlay-web-7/) (Web) ### 2. Plan pickers and paywalls Tiers side by side or a single offer, with the price, what is included and one button to upgrade. - [Tussar](https://kombai.com/gallery/inspirations/full-screen-overlay-web-17/) (Web) - [Membership](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-11/) (Mobile) - [Burin](https://kombai.com/gallery/inspirations/full-screen-overlay-web-42/) (Web) ### 3. Focused editors Multi-step forms and editing tools that take over the screen, with Back, Continue or Apply at the edges. - [Slipware](https://kombai.com/gallery/inspirations/full-screen-overlay-web-27/) (Web) - [Graticule](https://kombai.com/gallery/inspirations/full-screen-overlay-web-12/) (Web) - [Sandglass](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-13/) (Mobile) ### 4. Starting choices A question and a few large options, like what to set up first or what to save toward. - [Billetry](https://kombai.com/gallery/inspirations/full-screen-overlay-web-14/) (Web) - [Seamark](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-12/) (Mobile) - [Withyrow](https://kombai.com/gallery/inspirations/full-screen-overlay-web-34/) (Web) ### 5. Immersive sessions A breathing exercise, a workout timer or presenter mode, with almost nothing else on screen. - [Speculara](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-25/) (Mobile) - [Skeinly](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-16/) (Mobile) - [Helictide](https://kombai.com/gallery/inspirations/full-screen-overlay-web-48/) (Web) ### 6. Celebrations and confirmations A finished payment, a new plan or a first milestone, shown big with one button to carry on. - [Wefta](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-17/) (Mobile) - [Perilume](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-21/) (Mobile) - [Rillwater](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-26/) (Mobile) ## 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. - [Sign in](https://kombai.com/gallery/inspirations/full-screen-overlay-ios-5/) (Mobile) - [Sedgerow](https://kombai.com/gallery/inspirations/full-screen-overlay-web-8/) (Web) - [Haldenwood](https://kombai.com/gallery/inspirations/full-screen-overlay-web-35/) (Web) ### Booking Dates, sessions and changes to a stay picked in one focused view, then back to the listing. - [Deckle](https://kombai.com/gallery/inspirations/full-screen-overlay-web-22/) (Web) - [Awlmoor](https://kombai.com/gallery/inspirations/full-screen-overlay-web-43/) (Web) - [Skiveholt](https://kombai.com/gallery/inspirations/full-screen-overlay-web-44/) (Web) ### Settings and admin Profile settings, access rules and add-on tools opened over the app without leaving it. - [Foliot](https://kombai.com/gallery/inspirations/full-screen-overlay-web-5/) (Web) - [Bungrove](https://kombai.com/gallery/inspirations/full-screen-overlay-web-46/) (Web) - [Snagline](https://kombai.com/gallery/inspirations/full-screen-overlay-web-36/) (Web) ## Full screen overlay vs similar components | | [Full screen overlay](https://kombai.com/glossary/full-screen-overlay/) | [Dialog](https://kombai.com/glossary/dialog/) | [Drawer](https://kombai.com/glossary/drawer/) | [Bottom sheet](https://kombai.com/glossary/bottom-sheet/) | |---|---|---|---|---| | Covers | The whole screen | A centered window | One side of the screen | The bottom of the screen | | Page behind | Hidden | Dimmed | Dimmed or usable | Dimmed or usable | | Best for | Media and multi-step tasks | Short decisions | Detail, forms and filters | Short tasks on mobile | ## Build notes - Build it as a modal dialog: role="dialog", aria-modal="true" and aria-labelledby on its title, or the native 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 - [Dialog](https://kombai.com/glossary/dialog/) - [Bottom sheet](https://kombai.com/glossary/bottom-sheet/) - [Carousel](https://kombai.com/glossary/carousel/) - [Gallery](https://kombai.com/glossary/gallery/) ## References - [Apple Human Interface Guidelines: Modality](https://developer.apple.com/design/human-interface-guidelines/modality) - [Material Components for Android: Dialogs](https://github.com/material-components/material-components-android/blob/master/docs/components/Dialog.md) - [WAI-ARIA Authoring Practices: Dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)