Flows
Components
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with 💙 by Pablo Armenv2.1.19

/
/
Home
/Patterns
/313. Modal Blackout w/ Scroll

Modal Blackout w/ Scroll

 DesktopPathfindingWebEspañol

Generated Description

This pattern displays a scrollable modal over a darkened background, allowing users to focus on its content while retaining context of the underlying page.

View more...

Pattern Metadata

Released: May 23, 2022

Updated: May 28, 2026

Version: 2.1.19

Was this useful?

Export components

BETA

This pattern is ready to use on your codebase.

Sign in to preview and download component code for 313. Modal Blackout w/ Scroll.

Device (Tabs)
Desktop
System (OS)
Web
Language (i18n)
Español
Description
This pattern displays a scrollable modal over a darkened background, allowing users to focus on its content while retaining context of the underlying page.
VotesUp
VotesDown
Pattern ID
313
UX Flows
Pathfinding
UI Components
Modal
Scrollbar
Image / Illustration
Photo
Version
2.1.19

MercadoLibre

notion image
 

Related Patterns

  • 6. Modal Blackout w/ Form
  • 42. Modal for Tags Editing
  • 54. Modal for Language & Region Picker
  • 192. Modal w/ Actions
  • 262. Bottom Fixed Modal Blackout
  • 316. Modal Blackout for Delete Confirmation
  • 319. Modal Blackout w/ Multiple Choice
  • 357. Modal w/ Steps & Animation (No blackout)
  • 378. Modal Blackout w/ Animation
 

Still searching?

Tell us what's missing, and we'll help you find it.

Send feedback