Primefaces Dialog not working with Chrome - jsf

Question

I have a p:dialog. My intention is to create a list using p:datagrid and when user clicks an item this dialog will open and show its details. Please consider the example of p:datagrid in the showcase. However, currently it works fine in IE but not in Chrome. If I define "modal=true" then the browser turns black but the dialog doesn't show up.
<p:commandButton update=":form:sharePanel" value="Share" style="font-size: 10px" oncomplete="PF('dlg').show()" rendered="false">
<f:setPropertyActionListener target="#{shareController.current}" value="#{status}" />
</p:commandButton>
<p:dialog widgetVar="dlg" resizable="false" id="sharePanel" styleClass="no-border" modal="true">
<h:outputText value="#{shareController.current.url.url}" />
<h:panelGrid columns="3">
<p:dataGrid value="#{shareController.current.url.NLinkList}" var="nshare" columns="1" rendered="#{shareController.current.url.NLinkList.size() > 0}">
<h:panelGroup styleClass="tag noun">
<h:outputText value="#{nshare.noun}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.VLinkList}" var="vshare" columns="1" rendered="#{shareController.current.url.VLinkList.size() > 0}">
<h:panelGroup styleClass="tag verb">
<h:outputText value="#{vshare.verb}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.PLinkList}" var="pshare" columns="1" rendered="#{shareController.current.url.PLinkList.size() > 0}">
<h:panelGroup styleClass="tag prep">
<h:outputText value="#{pshare.prep}" />
</h:panelGroup>
</p:dataGrid>
</h:panelGrid>
</p:dialog>
What is wrong here?

Answer 1

If you are using Primefaces versions before 4.0 use dlg.show() instead of PF('dlg').show().
And try appending the dialog in body using attribute appendToBody="true", because if the Facelet is more complex and if you are using Layouts the dialog won't fire ind some browsers only model will appear.
<p:dialog appendToBody="true" >