$('#dlg').puidialog();
                                

<div id="dlg" title="Header">
    Content
</div>
                                

Name	Type	Default	Description
draggable	boolean	true	Enables dragging using header.
resizable	boolean	true	Enables content resizing.
location	string	center	Defines the position of the dialog, valid values are combination of "left", "right", "top", "bottom" like "left right" or absolute coordinates like "50,150".
width	int	300	Width of the dialog.
height	int	auto	Height of the dialog.
minWidth	int	150	Minimum width of a resizable dialog.
minHeight	int	25	Minimum width of a resizable dialog.
visible	boolean	false	When true, dialog is visible on page load.
modal	boolean	false	Defines if background should be blocked.
showEffect	string	null	Effect to run to show the dialog.
hideEffect	string	false	Effect to run to hide the dialog.
effectOptions	object	{}	Options for show and hide effect.
effectSpeed	string	normal	Speed of the animation in milliseconds or predefines 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.
appendTo	element	null	Defines where dialog should be appended e.g. document body.
buttons	array	null	An array of options for generated dialog buttons.
responsive	boolean	false	In responsive mode, dialog adjusts itself based on screen width.
title	string	nukk	Header text of dialog, if not defined title attribute of target element is used.

Name	Parameters	Description
beforeShow	event: puidialogbeforeShow event	Fired before showing.
afterShow	event: puidialogafterShow event	Fired after showing.
beforeHide	event: puidialogbeforeHide event	Fired before hiding.
afterHide	event: puidialogafterHide event	Fired after hiding.
minimize	event: puidialogafterMinimize event	Fired after minimize.
maximize	event: puidialogafterMaximize event	Fired after maximize.

Example

$('#dlg').puidialog({
    afterHide: function(event) {
        //...
    }
});
                                

Name	Parameters	Description
show	-	Shows dialog.
hide	-	Hides dialog.
toggleMinimize	-	Toggles minimized and current state.
toggleMaximize	-	Toggles maximized and current state.

Example

$('#dlg').puidialog('show');
                                

$(function() {
    $('#dlg').puidialog({
        showEffect: 'fade',
        hideEffect: 'fade',
        minimizable: true,
        maximizable: true,
        responsive: true,
        minWidth: 200,
        modal: true,
        buttons: [{
                text: 'Yes',
                icon: 'fa-check',
                click: function() {
                    $('#dlg').puidialog('hide');
                }
            },
            {
                text: 'No',
                icon: 'fa-close',
                click: function() {
                    $('#dlg').puidialog('hide');
                }
            }
        ]
    });

    $('#btn-show').puibutton({
        icon: 'fa-external-link-square',
        click: function() {
            $('#dlg').puidialog('show');
        }
    });
});
                                

<button id="btn-show" type="button">Show</button>
<div id="dlg" title="Godfather I">
    <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>
</div>
        
<button id="btn-show" type="button" onclick="document.getElementById('dlgelement').show()" is="p-button" icon="fa-external-link-square">PrimeElement</button>
<p-dialog id="dlgelement" title="Godfather I" modal showeffect="fade" hideeffect="fade" renderdelay="10">
    <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>
     <script type="x-facet-buttons">
        <button type="button" is="p-button" icon="fa-check" onclick="document.getElementById('dlgelement').hide()">Yes</button>
        <button type="button" is="p-button" icon="fa-close" onclick="document.getElementById('dlgelement').hide()">No</button>
    </script>   
</p-dialog>
                                

Usage

Dialog is a container element defined via p-dialog tag. Visibility is toggled using show() and hide() methods. Optional "x-facet-buttons" element is used to define the buttons at footer section.

<button id="btn-show" type="button" onclick="document.getElementById('dlgelement').show()" is="p-button" icon="fa-external-link-square">PrimeElement</button>

<p-dialog id="dlgelement" title="Title of Dialog" modal>
     content here

     <script type="x-facet-buttons">
        <button type="button" is="p-button" icon="fa-check" onclick="document.getElementById('dlgelement').hide()">Yes</button>
        <button type="button" is="p-button" icon="fa-close" onclick="document.getElementById('dlgelement').hide()">No</button>
    </script>   
</p-dialog>
                                

Attributes

Name	Type	Default	Description
id	string	null	Identifier of the element.
draggable	boolean	true	Enables dragging using header.
resizable	boolean	true	Enables content resizing.
location	string	center	Defines the position of the dialog, valid values are combination of "left", "right", "top", "bottom" like "left right" or absolute coordinates like "50,150".
width	int	300	Width of the dialog.
height	int	auto	Height of the dialog.
minheight	int	25	Maximum height of a resizable dialog.
minheight	int	25	Maximum height of a resizable dialog.
visible	boolean	false	When true, dialog is visible on page load.
modal	boolean	false	Defines if background should be blocked.
showeffect	string	null	Effect to run to show the dialog.
hideeffect	string	false	Effect to run to hide the dialog.
effectspeed	string	normal	Speed of the animation in milliseconds or predefines 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.
appendto	element	null	Defines where dialog should be appended e.g. document body.
responsive	boolean	false	In responsive mode, dialog adjusts itself based on screen width.
title	string	null	Header text of dialog.
renderdelay	integer	0	Delay in milliseconds to initialize the widget.
onbeforeshow	function	null	Name of the function to invoke before dialog is shown.
onaftershow	function	null	Name of the function to invoke after dialog is shown.
onbeforehide	function	null	Name of the function to invoke before dialog is hidden.
onafterhide	function	null	Name of the function to invoke after dialog is hidden.
onminimize	function	null	Name of the function to invoke when dialog gets minimized.
onmaximize	function	null	Name of the function to invoke when dialog gets maximized.

Methods

Name	Parameters	Description
show()	-	Displays the dialog.
hide()	-	Hides the dialog.
minimize()	-	Minimized the dialog.
maximize()	-	Maximizes the dialog.