use bootstrap overlapped modal window

0

Good morning, friends. I am using a button to call a modal bootstrap window ... up there with no problems. Inside that modal window I have another button that calls a second modal window ... works perfectly. The problem is that when I go back to the first window, it gets stuck and I can not roll it (it surpasses the height of the monitor); only what is in the background (underneath the first modal window) rotates. I can only exit the first modal window by typing esc. Just to note, I use the "data-backdrop = 'static' attribute to not close the window by clicking outside it and force the user to click the 'close' button to exit the first modal window. Does anyone know what's wrong? I'm posting below the code:

<div class="modal fade" id="cxEditaEvento" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-focus-on="input:first">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-left" id="myModalLabel">Dados do Evento</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="formEditaEvento" id="formEditaEvento" name="formEditaEvento" method="POST" action="saveEvento.php">
                    <fieldset>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="showID">ID</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="showID" id="showID" disabled />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="atividade">Evento</label>
                        <select class="selectpicker show-menu-arrow" data-width="260px" name="atividade" autofocus >
                            <?php 
                                if($stmt_atividades->rowCount() > 0){
                                    foreach($vetAtividades as $chave => $valor){
                                        echo "<option value='" . $vetAtividades[$chave]['ID'] . "'";
                                        echo ">" . $vetAtividades[$chave]['DESCRICAO'] . "</option>";
                                    }
                                }
                            ?>
                        </select>
                        <button type='button' id='btnNovaAtividade' class='btn btn-warning btn-sm' title='clique para inserir' data-toggle='modal' data-zero='cadSolicit' href='#cxEditaAtividade'>Novo</button>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="complemento">Atividade</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="complemento" id="complemento" placeholder="Complemento" value="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="numparticip">Participantes</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="numparticip" id="numparticip" placeholder="Informe o nº estimado" value="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="observ">Obs</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" rows="3" cols="80" name="observ" id="observ" placeholder="Observações" /></textarea>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" name="btnSaveEvento" value="btnSaveEvento" id="btnSaveEvento" class="btn btn-primary btn-large pull-left">Salvar</button>
                    </div>
                    </fieldset>
                </form>
                <div class="row">
                    <div class="col-md-12">
                        <div id="loadEditaEvento"><img src="Imagens/ajax-loader.gif" /></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id="resultEditaEvento"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnFecharCaixaEditaEvento" class="btn btn-default btnCloseModal" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="cxEditaAtividade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-left" id="myModalLabel">Descrição do Evento / Atividade</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="formEditaAtividade" id="formEditaAtividade" name="formEditaAtividade" method="POST" action="saveAtividade.php">
                    <fieldset>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="showID">ID</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="showID" id="showID" disabled />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="descricao">Nome</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="descricao" id="descricao" placeholder="Informe a descrição para a atividade" value="" />
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" name="enviar" value="enviar" class="btn btn-primary btn-large pull-left">Salvar</button>
                    </div>
                    </fieldset>
                </form>
                <div class="row">
                    <div class="col-md-12">
                        <div id="loadEditaAtividade"><img src="Imagens/ajax-loader.gif" /></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id="resultEditaAtividade"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
    
asked by anonymous 26.07.2016 / 15:02

1 answer

0

I was able to solve the problem with the code below:

$(document).on('hidden.bs.modal', '.modal', function () { 
    $('.modal:visible').length && $(document.body).addClass('modal-open');
}); 

With this, the modal window reverts to scrolling normally, not the background.

I hope it helps.

    
16.08.2016 / 19:37