Primefaces dialog close button not working - jsf

Question

I couldnt find a solution for this issue for 1 day.
When I click to close button on dialog, it does nothing.
I tried to add modal="false" then It works. But in my situation it should be modal="true",
to prevent user to click anywhere else on screen. What did I wrong?
Thanks for your time.
<ui:composition template="/pages/admin/admin.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<ui:define name="center">
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:dataTable id="basicDT" var="user" value="#{userSelectionViewMB.users}">
<f:facet name="header">
<p:outputLabel value="#{menu['menu.admin.updateuser.list']}"/>
</f:facet>
<p:column headerText="#{menu['menu.admin.createuser.id']}">
<h:outputText value="#{user.id}" />
</p:column>
<p:column headerText="#{menu['menu.admin.createuser.name']}">
<h:outputText value="#{user.name}" />
</p:column>
<p:column headerText="#{menu['menu.admin.createuser.surname']}">
<h:outputText value="#{user.surname}" />
</p:column>
<p:column headerText="#{menu['menu.admin.createuser.grade']}">
<h:outputText value="#{user.grade}" />
</p:column>
<p:column style="width:32px;text-align: center">
<p:commandButton update=":form:userDetail" oncomplete="PF('userDialog').show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{user}" target="#{userSelectionViewMB.selectedUser}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="User Info" widgetVar="userDialog" modal="true" showEffect="fade" closable="true"
closeOnEscape="true" hideEffect="fade" resizable="false">
<p:outputPanel id="userDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty userSelectionViewMB.selectedUser}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{userSelectionViewMB.selectedUser.id}" />
<h:outputText value="Name" />
<h:outputText value="#{userSelectionViewMB.selectedUser.name}" />
<h:outputText value="Surname:" />
<h:outputText value="#{userSelectionViewMB.selectedUser.surname}" />
<h:outputText value="Grade" />
<h:outputText value="#{userSelectionViewMB.selectedUser.grade}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>

Answer 1

I've tried this code:
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:commandButton update=":form:userDetail" oncomplete="PF('userDialog').show()" icon="ui-icon-search" title="View">
</p:commandButton>
<p:dialog header="User Info" widgetVar="userDialog" modal="true" showEffect="fade" closable="true" closeOnEscape="true" hideEffect="fade" resizable="false">
<p:outputPanel id="userDetail" style="text-align:center;">
<h:outputText value="Id:" />
<h:outputText value="1" />
<h:outputText value="Name" />
<h:outputText value="Mister" />
<h:outputText value="Surname:" />
<h:outputText value="Brown" />
<h:outputText value="Grade" />
<h:outputText value="first" />
</p:outputPanel>
</p:dialog>
</h:form>
and it works great! maybe the problem isn't the code that you posted. Did you check if there is any javascript error in your page?