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.

Examples

Basic

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--Position	fixed
	.pf-c-backdrop	--pf-c-backdrop--ZIndex	400
--pf-c-backdrop--ZIndex --pf-global--ZIndex--lg $pf-global--ZIndex--lg 400
	.pf-c-backdrop	--pf-c-backdrop--BackgroundColor	rgba(#030303, .62)
--pf-c-backdrop--BackgroundColor --pf-global--BackgroundColor--dark-transparent-100 $pf-global--BackgroundColor--dark-transparent-100 rgba($pf-color-black-1000, .62) rgba(#030303, .62)

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines