打开对话框时出现问题

时间:2017-11-19 23:34:22

标签: jsf primefaces

我正在使用primefaces在java jsf中进行网络系统,我遇到的问题是当我打开模态对话框时,阴影出现,覆盖所有内容。 我怎么能解决它并且看起来不像图像?

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>

1 个答案:

答案 0 :(得分:0)

在对话框的定义中插入此参数:

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