When opening a dialog block tabs

Question

Headlines

How to do so when opening this dialog, block the tabs not to be clicked on my screen.

 <p:dialog id ="dlgPagamentos"     
                          widgetVar="dlgPagamentos"
                          closable="true"
                          resizable="false"
                          header="Pagamentos"                          
                          modal="true"
                          onHide="tabelaPagamentosWdg.unselectAllRows();">    

                    <p:dataTable id="tabelaPagamentos" var="pagamento" widgetVar="tabelaPagamentosWdg"
                                 value="#{criticaIncorparacaoPagamento.bean.pagamentos}"
                                 paginator="true" rows="5" style="width: auto; height: auto; margin:6px auto;"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 rowsPerPageTemplate="5,10,15"
                                 rowKey="#{pagamento}"
                                 selection="#{criticaIncorparacaoPagamento.bean.pagamento}"
                                 selectionMode="single":>                                 

                        <p:ajax event="rowSelect" update=":frmCritica"  
                                listener="#{criticaIncorparacaoPagamento.carregarTelaIncorporacao}" />                               

                        <p:column headerText="Código de Barras" style="text-align: center;">
                            <h:outputText value="#{pagamento.codgBarraPagamento}" />
                        </p:column>

                        <p:column headerText="Autênticação" style="text-align: center;">
                            <h:outputText value="#{pagamento.numrAutenticacaoBancaria}" />
                        </p:column>

                        <p:column headerText="Data Pagamento" style="text-align:center;">
                            <h:outputText value="#{pagamento.dataPagamentoBanco}">
                                <f:convertDateTime pattern="dd/MM/yyyy" locale="pt_BR" timeZone="UTC-3" />
                            </h:outputText>
                        </p:column>                        

                        <p:column headerText="Valor Pagamento" style="text-align: center;" >
                            <h:outputText value="#{pagamento.valorRecebidoPagamento}" > 
                                <f:convertNumber pattern="###,##0.00" />
                            </h:outputText>
                        </p:column>

                        <p:column  headerText="Agência Arrecadadora" style="text-align: center; width: 250px;">
                            <h:outputText value="#{pagamento.agenciaBancaria.nomeAgencia eq null ? pagamento.codgAgenciaBancaria : pagamento.agenciaBancaria.nomeAgencia}" />
                        </p:column> 
                    </p:dataTable>
                </p:dialog>

Answer 1

https://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml

<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
    <h:outputText value="This is a Modal Dialog." />
</p:dialog>  

<p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />

Answer 2

On my button I am using this way, within my command method run my dialog.

 <p:commandButton style="width: 100px;"                                                
                  value="Pesquisar"
                  action="#{criticaIncorparacaoPagamento.buscarPagamentos}"            
                  update=":frmCritica"/>