Overlay panel is applied on a container element and requires a target to bind.

$('#overlay').puioverlaypanel({
    target:'#default'
});
                                

<button id="default" type="button">default</button>
<div id="overlay">
    <img src="resources/demo/images/...">
</div<
                                

Example

            $('#default').puioverlaypanel({
                'postShow': function(event) {
                    //
                } 
            });
                                

Example

            $('#default').puioverlaypanel('show');
                                

var localData = [
    {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
    {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
    {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
    {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
    {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
    {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
    {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
    {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
    {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
    {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
];

$('#sharedOverlay').puioverlaypanel({
    target: '#tbllocal',
    shared: true,
    delegatedTarget: 'td:last-child > button',
    showCloseIcon: true,
    showEffect: 'fade',
    hideEffect: 'fade',
    preShow: function(event, ui) {
        $('#brandimage').attr('src', 'showcase/resources/demo/images/car/' + $(ui.target).data('brand') + '-big.gif');
    }
});

$('#tbllocal').puidatatable({
    caption: 'Datatable Integration',
    columns: [
        {field: 'vin', headerText: 'Vin'},
        {field: 'brand', headerText: 'Brand'},
        {field: 'year', headerText: 'Year'},
        {field: 'color', headerText: 'Color'},
        {field: 'Integration', headerStyle:"width:10%",bodyStyle: 'text-align:center', headerText: 'Integration', content: function(localData) {
            return $('<button type="button" data-brand="' + localData.brand + '"></button>').puibutton({
                icon: 'fa-search'
            });
        }}
    ],
    datasource: localData
});

$('#overlay').puioverlaypanel({
    target:'#commandButton',
    hideEffect:'explode'
});

$('#datatableOverlay').puioverlaypanel({
    target:'#searchIcon',
    showEvent:"mouseover",
    hideEvent:"mousedown",
    showCloseIcon:true,
    showEffect:"blind",
    dismissable:false
});

handleRowSelect = function(event, data) {
    document.getElementById('messages').show([{severity: 'info', summary: 'Row Selected', detail: data.vin + ' ' + data.year}]);
};

$('#commandButton').puibutton();
$('#closeIcon').puibutton();
                                

<h3 class="first">Basic</h3>
<button id="commandButton" type="button">View</button>
<div id="overlay">
    <img src="showcase/resources/demo/images/mr-robot/mr-robot.jpg" style="width:200px">
</div>

<h3>Hover</h3>
<i id="searchIcon" class="fa fa-search" style="font-size:24px"></i>

<h3>Shared</h3>
<div id="datatableOverlay" style="width:400px">
    <p-growl id="messages"></p-growl>
    <p-datatable datasource="Showcase.demo.loadAllCars" paginator rows="10" selectionmode="single" onrowselect="handleRowSelect">
        <p-column field="vin" headertext="Vin" sortable filter></p-column>
        <p-column field="year" headertext="Year" sortable filter></p-column>
        <p-column field="brand" headertext="Brand" sortable filter></p-column>
        <p-column field="color" headertext="Color" sortable filter> 
            <template>
                <span style="color:{{color}}">{{color}}</span>
            </template>
        </p-column>
    </p-datatable>
</div>
        
<div id="tbllocal"></div>
<div id="sharedOverlay">
    <img id="brandimage" src="showcase/resources/demo/images/car/BMW-big.gif" style="width:200px"/>
</div>