Dialog
Dialog is a container to display content in an overlay window.
Import #
import { DialogModule } from 'primeng/dialog';Basic #
Dialog is used as a container and visibility is controlled with visible property.
Template #
Dialog can be customized using header and footer templates.
Position #
The position property is used to display a Dialog at all edges and corners of the screen.
Maximizable #
Setting maximizable property to true enables the full screen mode.
Long Content #
Dialog automatically displays a scroller when content exceeds viewport.
Without Modal #
Mask layer behind the Dialog is configured with the modal property. By default, no modal layer is added.
Responsive #
Dialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in style property is used.
Headless #
Headless mode allows you to customize the entire user interface instead of the default elements.
Accessibility #
Screen Reader
Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup.
It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may use closeButtonProps to customize the element and override the default aria-label.
Maximize element is a button with an aria-label that refers to the aria.maximizeLabel and aria.minimizeLabel property of the locale API. It cannot be customized using the maximizeButtonProps.
<p-button icon="pi pi-external-link" (click)="visible = true" aria-controls="{{visible ? 'dialog' : null}}" aria-expanded="{{visible ? true : false}}" />
<p-dialog id="dialog" header="Header" [(visible)]="visible" [style]="{ width: '50vw' }" (onHide)="visible = false">
<p>Content</p>
</p-dialog>Overlay Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the dialog. |
| shift + tab | Moves focus to the previous the focusable element within the dialog. |
| escape | Closes the dialog if closeOnEscape is true. |
Close Button Keyboard Support
| Key | Function |
|---|---|
| enter | Closes the dialog. |
| space | Closes the dialog. |
