Backdrop

A backdrop is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed.

Examples

Basic

Basic screenshot

Documentation

Overview

This component puts a backdrop over the entire viewport.

Usage

Class
Applied to
Outcome
.pf-v6-c-backdrop
<div>
Initiates backdrop. Required
.pf-v6-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

Expand or collapse columnSelectorVariableValue
.pf-v6-c-backdrop--pf-v6-c-backdrop--Position
fixed
.pf-v6-c-backdrop--pf-v6-c-backdrop--ZIndex
400
.pf-v6-c-backdrop--pf-v6-c-backdrop--BackgroundColor
(In light theme) rgba(21, 21, 21, 0.2000)