在ajax请求jsf上从模态滚动更改为正文

Question

当我打开我的模态对话框（bootstrap 3）时，滚动聚焦于模态没有问题，但是当我发出一些 ajax 请求（f:ajax）时，滚动离开模态并转到正文（背景）。

这是我的模态：

        <div id="modalDialogProva" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <h:panelGroup layout="block" id="modalProva">
                        <p:focus for="inputTextNumeroProva" />
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Número *</label>
                                <h:inputText value="#{cursoMB.paginaProva.numero}"
                                    styleClass="form-control" required="true"
                                    id="inputTextNumeroProva"
                                    requiredMessage="O número da página é obrigatório">
                                    <f:convertNumber />
                                </h:inputText>
                            </div>

                            <div class="form-group">
                                <label>Título *</label>
                                <h:inputText value="#{cursoMB.paginaProva.titulo}"
                                    styleClass="form-control" required="true"
                                    requiredMessage="O título é obrigatório" />
                            </div>

                            <div class="form-group">
                                <label>Qtd. Tentativas *</label>
                                <h:inputText value="#{cursoMB.paginaProva.qtdTentativas}"
                                    styleClass="form-control">
                                    <f:convertNumber />
                                </h:inputText>
                                <p class="help-block">Quantidade de tentativas para fazer a
                                    prova. Coloque 0 para ilimitada.</p>
                            </div>

                            <div class="form-group">
                                <label>Taxa de Aproveitamento (%) *</label>
                                <h:inputText value="#{cursoMB.paginaProva.taxaAproveitamento}"
                                    styleClass="form-control">
                                    <f:convertNumber />
                                </h:inputText>
                                <p class="help-block">Taxa de aproveitamento (%) para
                                    aprovação na prova</p>
                            </div>

                            <div class="btn-group" role="group" aria-label="..."
                                style="margin-bottom: 10px">
                                <h:commandButton styleClass="btn btn-default" type="button"
                                    value="Criar Questão"
                                    actionListener="#{cursoMB.novaQuestaoCurso()}">
                                    <f:passThroughAttribute name="data-toggle" value="modal" />
                                    <f:passThroughAttribute name="data-target"
                                        value="#modalDialogQuestao" />
                                    <f:ajax execute="modalProva" render="modalQuestao" />
                                </h:commandButton>
                                <h:commandButton styleClass="btn btn-default" type="button"
                                    value="Buscar Questão">
                                    <f:passThroughAttribute name="data-toggle" value="modal" />
                                    <f:passThroughAttribute name="data-target"
                                        value="#modalDialogFindQuestao" />
                                    <f:ajax execute="modalProva" render="modalFindQuestao" />
                                </h:commandButton>
                            </div>

                            <div class="table-responsive">
                                <h:dataTable var="bean"
                                    rendered="#{cursoMB.pagina.getClass().getSimpleName() == 'PaginaProva'}"
                                    value="#{cursoMB.paginaProva.questoesCurso}"
                                    styleClass="table table-hover"
                                    binding="#{cursoMB.dataTableQuestoesCursoProva}">


                                    <h:column>
                                        <f:facet name="header">
                        Banca
                    </f:facet>
                                        <h:outputText value="#{bean.questao.banca.nome}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                        Texto
                    </f:facet>
                                        <h:outputText value="#{bean.questao.trechoTexto}" />
                                    </h:column>

                                </h:dataTable>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <h:commandButton styleClass="btn btn-default"
                                actionListener="#{cursoMB.salvarPagina()}" value="Salvar">
                                <f:ajax execute="modalProva"
                                    render="selectOneMenuExperimentarAte tabPaginas" />
                                <f:passThroughAttribute name="data-dismiss" value="modal" />
                            </h:commandButton>
                            <h:commandButton styleClass="btn btn-danger" type="button"
                                value="Cancelar">
                                <f:passThroughAttribute name="data-dismiss" value="modal" />
                            </h:commandButton>
                        </div>

                    </h:panelGroup>
                </div>
            </div>
        </div>

当我单击某个按钮并再次呈现模态对话框时，滚动消失并转到正文（在后台）。

一些想法如何解决这个问题？我无法在长内容中滚动我的模式。

Answer 1

在 Javascript 中添加以下内容：

setTimeout(function() { jQuery('body').addClass('modal-open'); }, 500);