Backdrop
A backdrop is used to screen the main content of a page when a modal overlay is opened. It prevents the user from doing other work on the page until the modal is dismissed. Related design guidelines: Modal
ExamplesDocumentationCSS VariablesExamples
Documentation
Overview
This component puts a backdrop over the entire viewport.
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-backdrop | <div> | Initiates backdrop. Required |
.pf-c-backdrop__open | <body> | Lock scrolling when backdrop is active. This class should be set on <body> while backdrop is active and removed while backdrop is inactive. Required |
CSS Variables
| .pf-c-backdrop | --pf-c-backdrop--ZIndex | 400 | ||
| .pf-c-backdrop | --pf-c-backdrop--Color | rgba(#030303, .62) | ||
| .pf-c-backdrop | --pf-c-backdrop--BackdropFilter | blur(10px) | ||
