แก้ปัญหา dialog primefaces อยู่ใต้ modal : primefaces

        ปัญหานี้  จะเกิดขึ้นในกรณีที่ เรานำ dialog ไปไว้ใน layout  แทนที่จะเป็น นอก layout ซึ่งเป็นสิ่งที่ถูกต้อง
มันก็จะทำให้ dialog เรา เวลาที่แสดงขึ้นมา  เกิดไปอยู่ใต้  modal ซ่ะงั้น   ถึงจะแก้ด้วยการกำหนด z-index ของ css ไปยังไง  มันก็ไร้ความหมายครับ  เพราะ  level มันต่างกัน

วิธีแก้คือ  ใน  <p:dialog/>  จะมี attribute appendToBody อยู่ให้กำหนดเป็น true ซ่ะ  ก็หมดปัญหาแล้วครับ

<p:dialog header="dialog"
          widgetVar="dialogWidget"
          modal="true"
          width="600"
          appendToBody="true"
          height="400"
          resizable="false">
    <div class="action-button">
        <p:commandButton value="OK"
                         styleClass="blue-button"
                         onclick="dialogWidget.hide();"
                         type="button"/>
        <p:spacer/>
        <p:commandButton value="Cancle"
                         styleClass="white-gray-button"
                         onclick="dialogWidget.hide();"
                         type="button"/>
    </div>
</p:dialog>