& lt; p: dialogue & gt; - The dialog box does not close when it should


I am using JSF (Mojara) and Primefaces 3.4 in a sample application. I am applying a layout on a screen where on a header (north) there is one Image link (on click a dialog box gets opened).


        <h:form id="headerForm">    

        <p:panelGrid id="headerFormPanelGridID" style="align:left;border:0px>

            <p:column width="70">
    <p:commandLink onclick="dialogWidgetWar.show();"  title="SampleImg">
    <p:graphicImage value="../sampleimg.jpg" />



    <p:dialog id="idInfo"  modal="true" widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400"  height="100" resizable="true" >
        <h:panelGrid id="sampleId" style="cellpadding" border="0" cellpadding="0" cellspacing="0" width="200">



For layout

<html lang="en"


        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false">
                     <ui:include src="../northheader.xhtml" /> 


            <p:layoutUnit position="west" size="200" resizable="false" closable="false" collapsible="false">

                    <ui:include src="../left.xhtml" />


            <p:layoutUnit position="center" size="200">

                <ui:insert name="pageContent"></ui:insert>




Layout is being displayed properly, but when I Click on "SampleImg" link in northheader.xhtml, its getting opened but closing the dialog is not working, even if I add one close button inside the dialog box and onclick="dialogWidgetWar.hide()" is not working. I am not even able to select anything.

Can anybody help me out here, where is the problem?

Add appendToBody="true" attribute inside p:dialog

<p:dialog id="idInfo"  modal="true" appendToBody="true"
widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400"  height="100" resizable="true" >