ダイアログを開くときの問題

Question

私はprimefaceを使ってjava jsfでWebシステムをやっていますが、問題はモーダルダイアログを開いたときに影が現れ、すべてをカバーしていることです。 どうすれば解決でき、画像のように見えるのですか？

enter image description here

これは、それがクリックされたときに、ダイアログを呼び出すボタンのコードです：

<p:commandButton id="btnNuevo" 
             icon="ui-icon-plusthick" 
             title="Presione para Registrar una nueva categoria" 
             styleClass="btn btn-primary" 
             style="font-size:12px;font-family:Microsoft Sans Serif;" 
             oncomplete="PF('dlg1').show();"/> 

これは、ダイアログのコードです：

<h:form id="frmCategoriaMantenimiento"> 
      <p:growl id="mensaje" showDetail="true" autoUpdate="true" life="2000"/> 
      <p:dialog modal="true" id="dialog" focus="txtCategoria" style="font-family:Microsoft Sans Serif" resizable="false" header="Mantenimiento de Categoria" widgetVar="dlg1" showEffect="fade" hideEffect="fade" closable="false"> 
       <legend class="scheduler-border" style="font-size:13px"><strong style="font-size:12px;">Ingresar Datos</strong></legend> 

       <div class="row" style="margin-right:3px"> 
        <div class="col-sm-3" style="width:420px"> 
         <div class="form-group" style="margin-bottom:4px;"> 
          <h:outputLabel for="txtCategoria" 
              value="Categoria: " 
              styleClass="control-label" 
              style="font-size:13px;font-family:Microsoft Sans Serif;padding-right:8px;"> 
           <h:outputLabel value="(*)" 
               styleClass="control-label" 
               style="color: #8a6d3b"/> 
          </h:outputLabel> 

          <p:inputText id="txtCategoria" 
             value="#{categoriaAction.categoriaDTO.c_t_categoria}" 
             style="height:23px;width:280px;font-family:Microsoft Sans Serif" 
             label="categoria"> 
          </p:inputText> 
         </div> 
        </div> 
       </div> 
<p/>      
        <div> 
         <h:outputLabel value="(*) : Campos Requeridos" 
             styleClass="control-label" 
             style="color:#8a6d3b;font-size:12px;font-family:Microsoft Sans Serif;"/> 
        </div> 

       <f:facet name="footer"> 
        <div class="row"> 
         <div class="col-sm-8"> 
          <div class="form-group box-main-btn" style="margin-bottom:0px;height:29px"> 
           <p:commandButton value="Grabar" 
               action="#{categoriaAction.Grabar(categoriaAction.categoriaDTO)}" 
               update="mensaje,txCodigo,txtCategoria,:frmCategoriaListado:tbCategoria" 
               ajax="true" 
               style="font-family:Microsoft Sans Serif;font-size:12px;width:100px;" 
               oncomplete="handleLoginRequest(xhr, status, args)"> 
            <p:confirm header="Mensaje" message="¿Desea Grabar?" icon="ui-icon-alert"/> 
            <p:confirmDialog global="true" showEffectq="fade" hideEffect="fade" closable="false" style="font-family:Microsoft Sans Serif;"> 
             <p:commandButton value="Si" 
                 type="button" 
                 styleClass="ui-confirmdialog-yes" 
                 icon="ui-icon-check" 
                 update="data" 
                 style="font-family:Microsoft Sans Serif;"/> 
             <p:commandButton value="No" 
                 type="button" 
                 styleClass="ui-confirmdialog-no" 
                 style="font-family:Microsoft Sans Serif;" 
                 icon="ui-icon-close"/> 
            </p:confirmDialog> 
           </p:commandButton> 

           <p:commandButton value="Cancelar" 
               style="font-family:Microsoft Sans Serif;height:28px;font-size:12px;width:100px;" 
               styleClass="btn btn-default" 
               action="#{categoriaAction.Cancelar()}" 
               update="frmCategoriaMantenimiento,:frmCategoriaListado:tbCategoria"> 
           </p:commandButton> 
          </div> 
         </div> 
        </div> 
       </f:facet> 
      </p:dialog> 
     </h:form> 

Answer 1

は、定義の中に挿入しますダイアログのこのパラメータ：

appendTo="@(body)" 

は、このように

<p:dialog modal="true" id="dialog" focus="txtCategoria" style="font-family:Microsoft Sans Serif" resizable="false" header="Mantenimiento de Categoria" widgetVar="dlg1" showEffect="fade" hideEffect="fade" closable="false" appendTo="@(body)"> 

あなたはここでより多くの情報を見つけることができます。Link