Live demo — this example is server-driven; run the showcase locally for the interactive version.

Modal

A focus-trapping dialog overlaid on the page — for blocking confirmations, focused forms, or content that requires attention. Always pair with a clear close action and a real reason to block.

Examples

Basic modals

Confirm dialog — backdrop, bullseye centering, Escape closes.

Scrollable modals

A long body scrolls inside the dialog.

With a static description

__description sits in the header and never scrolls away.

Top aligned

pf-m-align-top pins the dialog to the viewport top.

Modal sizes

pf-m-sm / pf-m-md / pf-m-lg.

Custom width

An inline width overrides the size modifiers.

Custom header

Hand-composed header content via __header-main.

No header or footer

Body only; the floating close button remains.

Title icon

Status variants color the __title-icon — here pf-m-warning.

Custom title icon

Any icon in the title icon slot.

A dropdown opens inside the dialog; Escape closes the menu first, then the modal.

With help

A help button in the header opens a popover.

With form

The footer submit button targets the body form via the form attribute and stays disabled until valid. For wizards in modals see the Wizard page.

Created connection:

Custom focus

Opening the modal focuses the Confirm button instead of the first focusable element.

Without title

No title element — the modal box carries aria-label instead.

Generic container

A bare modal box with no children — a padding-free container (wizard-in-a-modal use case). Escape closes it.

Custom alert

pf-m-custom — the neutral alert state with a bell title icon and a screen-reader alert prefix.

Info alert

pf-m-info.

Success alert

pf-m-success.

Warning alert

pf-m-warning.

Danger alert

pf-m-danger.

Danger alert with title modifier

The status class sits on the title element instead of the modal box.

Documentation

The modal is a template family: modal renders the backdrop + bullseye + modal-box and the regions come from modal-close / modal-header / modal-body / modal-footer includes composed in its main block. The trigger button lives next to the include inside a shared x-data scope providing open (or use eventOpen for the self-contained event-driven mode).

* required
Name	Type	Description
* `id`	String	modal-box id; the backdrop gets `{id}-backdrop` and the header derives `{id}-title` for `aria-labelledby`.
`size / variant / alignTop / width`	String / Boolean	`sm\|md\|lg`; `danger\|warning\|success\|info` (also colors the header icon); `pf-m-align-top`; inline width (e.g. "50%").
`ariaLabel`	String	Label the dialog directly — use for headerless modals.
`eventOpen`	Boolean	Self-contained mode: opens on the `open-modal` window event (detail = id), Escape closes, focus is trapped. Without it the modal expects an outer `x-data` providing `open`.
`escapeExpr`	String	Override the Escape-key expression (e.g. close an inner dropdown first).
`attrs`	String (raw)	Raw attribute passthrough on the modal-box. Shadowed inside the family's inserts.
`modal-close`	Include	Corner close button wired to `open = false`; `ariaLabel`.
`modal-header`	Include	Title content is the main block (rich markup welcome); `headingLevel`, `iconName`, `descriptionText`, `hasModalHelp` + `modalHelp` slot.
`modal-body`	Include	Main-block content; `scrollable`, `attrs`.
`modal-footer`	Include	Main-block content (action buttons).

Usage

Open via event. The runtime template listens for @open-modal.window with $event.detail === id. Dispatch from any button: $dispatch('open-modal', 'my-modal').

Focus management. The runtime calls PHA.trapFocus on open and PHA.releaseFocus on close — both ship with the extension.

Edit modal.html on GitHub