PatternFly Elements - Home PatternFly Elements

Modal

Overview

Modals display information in a window or help a user focus on a task without navigating them away from the page. A user can’t perform other actions until the modal is dismissed.

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 more Open modal

Installation

npm install @patternfly/elements

Usage

  <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>
  <button id="usage-trigger">Open modal</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 more Open a small modal

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 more Open a medium modal

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 more Open a large modal
variant

The variant controls the width of the modal. There are three options: small, medium and large. The default is large.

DOM Property
variant
Type
'small' | 'medium' | 'large' | undefined
Default
unknown
position

position="top" aligns the dialog with the top of the page

DOM Property
position
Type
'top' | undefined
Default
unknown
open
DOM Property
open
Type
boolean
Default
false
trigger

Optional ID of the trigger element

DOM Property
trigger
Type
string | undefined
Default
unknown

DOM Properties

width
Type
'small' | 'medium' | 'large' | undefined
Default
unknown
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

 —

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

© 2022-2023 Red Hat, Inc. Deploys by Netlify