use bootstrap override modal window

Asked

Viewed 451 times

0

Good morning, my friends. I’m using a button to call a modal window bootstrap...so far no problem. Inside this 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 is locked and I cannot roll it (it exceeds the height of the monitor); only what is in the background (under the first modal window) is that it rotates. I can only get out of the first modal window by typing Esc. Just for the record, I use the attribute "data-backdrop='Static' not to close the window by clicking outside it and force the user to click the 'close' button to exit the first modal window. Anyone know said what’s wrong ? I’m posting down 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>

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 rolls back normally and not the background.

I hope it helps.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.