Dialog Dialog is a container widget featuring modality, minimize, maximize and animations.

The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.

Import

import {Dialog} from 'primeng/primeng';

Getting Started

Dialog is used as a container and visibility is controlled with visible property.

<p-dialog header="Title" [(visible)]="display">
    Content
</p-dialog>

<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square">Show</button>
export class ModelComponent {

    visible: boolean;

    showDialog() {
        this.visible = true;
    }

}

By default dialog is hidden and enabling the visible property displays the dialog. As visible supports two-way binding, hiding the dialog with close button updates the visible state as false.

Footer

Footer area is defined using the footer element.

<p-dialog header="Title" [(visible)]="display">
    Content
    <footer>
        Footer content here
    </footer>
</p-dialog>

Attributes

Name Type Default Description
header string null Title text of the dialog.
draggable boolean true Enables dragging to change the position using header.
resizable boolean true Enables resizing of the content.
location string center Defines the position of the dialog in window, valid values are combination of "left", "right", "top", "bottom" like "left right" or absolute coordinates like "50,150".
minWidth number 150 Minimum width of a resizable dialog.
minHeight number 25 Minimum width of a resizable dialog.
width int 300 Width of the dialog.
height int auto Height of the dialog.
visible boolean false Specifies the visibility of the dialog.
modal boolean false Defines if background should be blocked when dialog is hidden.
showEffect string null Effect to use when showing the dialog.
hideEffect string false Effect to use hiding the dialog.
effectDuration any null Duration of the effect in milliseconds or pre-defined values like "slow","normal" and "fast".
closeOnEscape boolean true Specifices if pressing escape key should hide the dialog.
rtl boolean false When enabled dialog is displayed in RTL direction.
closable boolean true Adds a close icon to the header to hide the dialog.
minimizable boolean true Adds a toggle icon to the header to minimize the dialog.
maximizable boolean true Adds a toggle icon to the header to maximize the dialog.
responsive boolean false In responsive mode, dialog adjusts itself to screen width.

Events

Name Parameters Description
onBeforeShow event: Event object Callback to invoke before dialog is shown.
onAfterShow event: Event object Callback to invoke after dialog is shown.
onBeforeHide event: Event object Callback to invoke before dialog is hidden.
onAfterHide event: Event object Callback to invoke after dialog is hidden.
onMinimize event: Event object Callback to invoke when dialog is minimized.
onMaximize event: Event object Callback to invoke when dialog is maximized.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-dialog Container element
ui-dialog-titlebar Container of header.
ui-dialog-title Header element.
ui-dialog-titlebar-icon Icon container inside header.
ui-dialog-titlebar-close Close icon element.
ui-dialog-titlebar-minimize Minimize icon element.
ui-dialog-titlebar-maximize Maximize icon element.
ui-dialog-content Content element.

Dependencies

jQuery, jQuery UI WidgetFactory API, PrimeUI Dialog.

<p-dialog id="dlgelement" header="Godfather I" [(visible)]="display" modal="modal" minimizable="minimizable" maximizable="maximizable" showEffect="fade" hideEffect="fade">
    <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
       His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
       Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
       kind and benevolent to those who give respect, 
       but given to ruthless violence whenever anything stands against the good of the family.</p>
        <footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                <button type="button" pButton icon="fa-close">No</button>
                <button type="button" pButton icon="fa-check">Yes</button>
            </div>
        </footer>
</p-dialog>

<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square">Show</button>
export class DialogDemoComponent {

    display: boolean = false;

    showDialog() {
        this.display = true;
    }

}