Modal
A modal displays important information to a user without requiring them to navigate to a new page.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-modal/pf-modal.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
Modal with a header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Learn moreInstallation
npm install @patternfly/elementsUsage
Modal with a header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Learn moreView HTML Source
<pf-modal trigger="usage-trigger">
<h2 slot="header">Modal with a header</h2>
<p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#bar">Learn more</a>
</pf-modal>
<pf-button id="usage-trigger">Open modal</pf-button>
Slots
- Default Slot
-
The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.
-
header -
The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).
-
footer -
Optional footer content. Good place to put action buttons.
Attributes
Small modal with a header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Learn moreView HTML Source
<pf-modal variant="small" trigger="rendered-slot-small">
<h2 slot="header">Small modal with a header</h2>
<p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#bar">Learn more</a>
</pf-modal>
<pf-button id="rendered-slot-small"> Open a small modal </pf-button>
Medium modal with a header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Learn moreView HTML Source
<pf-modal variant="medium" trigger="rendered-slot-medium">
<h2 slot="header">Medium modal with a header</h2>
<p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#bar">Learn more</a>
</pf-modal>
<pf-button id="rendered-slot-medium"> Open a medium modal </pf-button>
Large modal with a header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Learn moreView HTML Source
<pf-modal variant="large" trigger="rendered-slot-large">
<h2 slot="header">Large modal with a header</h2>
<p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#bar">Learn more</a>
</pf-modal>
<pf-button id="rendered-slot-large"> Open a large modal </pf-button>
variant-
The
variantcontrols the width of the modal. There are three options:small,mediumandlarge. The default islarge.- DOM Property
variant- Type
-
'small' | 'medium' | 'large' - Default
-
unknown
position-
position="top"aligns the dialog with the top of the page- DOM Property
position- Type
-
'top' - Default
-
unknown
open-
- DOM Property
open- Type
-
boolean - Default
-
false
trigger-
Optional ID of the trigger element
- DOM Property
trigger- Type
-
string - Default
-
unknown
DOM Properties
returnValue-
- Type
-
string - Default
-
''
Methods
setTrigger(element: HTMLElement)toggle()-
Manually toggles the modal.
modal.toggle(); show()-
Manually opens the modal.
modal.open(); showModal()close(returnValue: string)-
Manually closes the modal.
modal.close();
Events
open-
Fires when a user clicks on the trigger or manually opens a modal.
Event Type:ModalOpenEvent close-
Fires when either a user clicks on either the close button or the overlay or manually closes a modal.
Event Type:ModalCloseEvent
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-modal-box--ZIndex |
500
|
|
--pf-c-modal-box--Width |
Width of the modal |
calc(100 - 2rem)
|
--pf-c-modal-box--MaxWidth |
Max width of the modal |
calc(100 - 2rem)
|
--pf-c-modal-box--m-sm--sm--MaxWidth |
Max width of the small variant modal |
35rem
|
--pf-c-modal-box--m-md--MaxWidth |
Max width of the small variant modal |
52.5rem
|
--pf-c-modal-box--m-lg--lg--MaxWidth |
Max width of the large variant modal |
70rem
|
--pf-c-modal-box--MaxHeight |
Max height of the modal |
calc(100 - 3rem)
|
--pf-c-modal-box--BoxShadow |
var(--pf-global--BoxShadow--xl)
|
|
--pf-c-modal-box__title--FontSize |
1.5rem
|
|
--pf-c-modal-box--m-align-top--MarginTop |
2rem
|
|
--pf-c-modal-box--m-align-top--MaxWidth |
—
|
|
--pf-c-modal-box--m-align-top--MaxHeight |
—
|
|
--pf-c-modal-box--BackgroundColor |
#fff
|
|
--pf-c-modal-box__title--FontFamily |
default font family for header-slotted headings |
—
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-c-modal-box--ZIndex |
var(--pf-global--ZIndex--xl,
500)
|
|
--pf-global--ZIndex--xl |
500
|
|
--pf-c-backdrop--BackgroundColor |
var(--pf-global--BackgroundColor--dark-transparent-100,
rgba(3, 3, 3, 0.62))
|
|
--pf-global--BackgroundColor--dark-transparent-100 |
rgba(3, 3, 3, 0.62)
|
|
--pf-c-modal-box--Width |
calc(100% - var(--pf-global--spacer--xl,2rem))
|
|
--pf-c-modal-box--MaxWidth |
calc(100% - var(--pf-global--spacer--xl,2rem))
|
|
--pf-c-modal-box--BoxShadow |
var(--pf-global--BoxShadow--xl,
0 1rem 2rem 0 rgba(3, 3, 3, 0.16),
0 0 0.5rem 0 rgba(3, 3, 3, 0.1))
|
|
--pf-global--BoxShadow--xl |
0 1rem 2rem 0 rgba(3, 3, 3, 0.16),
0 0 0.5rem 0 rgba(3, 3, 3, 0.1)
|
|
--pf-c-modal-box--m-sm--sm--MaxWidth |
35rem
|
|
--pf-c-modal-box--m-md--Width |
52.5rem
|
|
--pf-c-modal-box--m-lg--lg--MaxWidth |
70rem
|
|
--pf-c-modal-box--MaxHeight |
calc(100vh - var(--pf-global--spacer--2xl,
3rem))
|
|
--pf-global--spacer--2xl |
3rem
|
|
--pf-c-modal-box--BackgroundColor |
var(--pf-global--BackgroundColor--100,
var(--pf-global--BackgroundColor--100,
#fff))
|
|
--pf-global--BackgroundColor--100 |
#fff
|
|
--pf-c-modal-box__title--FontSize |
var(--pf-global--FontSize--2xl,
1.5rem)
|
|
--pf-global--FontSize--2xl |
1.5rem
|
|
--pf-global--FontWeight--normal |
400
|
|
--pf-c-modal-box__title--FontFamily |
var(--pf-global--FontFamily--heading--sans-serif,
var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
"RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif))
|
|
--pf-global--FontFamily--heading--sans-serif |
var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
"RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)
|
|
--pf-global--FontFamily--redhat-updated--heading--sans-serif |
"RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif
|
|
--pf-c-button--PaddingTop |
var(--pf-global--spacer--form-element, 0.375rem)
|
|
--pf-global--spacer--form-element |
0.375rem
|
|
--pf-c-button--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-global--spacer--lg |
1.5rem
|
|
--pf-c-button--m-plain--Color |
var(--pf-global--Color--200,
#6a6e73)
|
|
--pf-global--Color--200 |
#6a6e73
|
|
--pf-c-button--FontSize |
var(--pf-global--FontSize--md,
1rem)
|
|
--pf-global--FontSize--md |
1rem
|
|
--pf-c-button--m-plain--focus--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-global--Color--100 |
#151515
|
|
--pf-c-modal-box--m-align-top--MarginTop |
var(--pf-c-modal-box--m-align-top--spacer,
2rem)
|
|
--pf-global--spacer--md |
1rem
|
|
--pf-c-modal-box--m-align-top--MaxWidth |
calc(100% - min(
var(--pf-c-modal-box--m-align-top--spacer, 2rem) * 2,
var(--pf-global--spacer--xl, 2rem)))
|
|
--pf-c-modal-box--m-align-top--spacer |
2rem
|
|
--pf-c-modal-box--m-align-top--MaxHeight |
calc(100% - var(--_height-offset) - var(--_spacer-align-top))
|
|
--pf-global--spacer--xl |
0.5rem
|
CSS Shadow Parts
overlay-
The modal overlay which lies under the dialog and above the page body
dialog-
The dialog element
content-
The container for the dialog content
header-
The container for the optional dialog header
description-
The container for the optional dialog description in the header
close-button-
The modal's close button
footer-
Actions footer container
