Messages Messages widget is used to display messages inline.
//initialize
$('#default').puimessages();

//show messages
$('#default').puimessages('show', 'info', {summary: 'Message Summary', detail: 'Message Detail'});
                                
<div id="default" />   
                                
Name Type Default Description
closable boolean true Displays a closer icon at top right when enabled.

No events.

Name Parameters Description
show severity: Type of the messages, valid values are info, warn and error.
msgs: An array of messages or a single message
Displays given message(s) with severity.
clear - Cleans the content of container.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.
$('#default').puimessages();

$('#btn-info').puibutton().click(function() {
    addMessage('info', {summary: 'Message Title', detail: 'Message Detail here.'});
});

$('#btn-warn').puibutton().click(function() {
    addMessage('warn', {summary: 'Message Title', detail: 'Message Detail here.'});
});

$('#btn-error').puibutton().click(function() {
    addMessage('error', {summary: 'Message Title', detail: 'Message Detail here.'});
});

$('#btn-multiple').puibutton().click(function() {
    addMessage('info', [{summary: 'Message Title', detail: 'Message Detail here.'}
        ,{summary: 'Message Title', detail: 'Message Detail here.'}
        ,{summary: 'Message Title', detail: 'Message Detail here.'}]);
});

addMessage = function(severity, msg) {
    $('#default').puimessages('show', severity, msg);
}
                                
<div id="default" />

<button id="btn-info" type="button">Info</button>
<button id="btn-warn" type="button">Warn</button>
<button id="btn-error" type="button">Error</button>
<button id="btn-multiple" type="button">Multiple</button>