1

Galera... eu tenho um modal de cadastro. Sendo que eu gostaria de chamar outro modal, estando ainda dentro dele. Ou seja... Ficaria sobreposto ao meu modal de cadastro.

Estou usando o codigo para chamar o meu modal em Bootstrap 4:

<button class="btn btn-outline-secundary my-2 my-sm-0" id="iniciaCadastro" type="button" data-toggle="modal" data-target="#cadastraModal">Cadastre-se</button>

A estrutura é semelhante a que temos na documentação bootstrap. Usando o Header, Body e footer.

No footer, eu tento chamar um outro modal, com detalhes de termos e condições.

<a href="#" data-toggle="modal" data-target="#termosModal">Termos de uso</a>

Mas, me parece que o bootstrap não suporta essa estratégia...

Alguém pode me ajudar a solucionar esse problema?

2
  • 1
    O Bootstrap não suporta modals aninhados. Como dito na documentação: "Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences." Commented 18/06/2018 às 16:54
  • Em termos de UX eu acho isso um grande erro, por isso talvez seria melhor avaliar com o usuário ou com o time de Ux uma forma melhor de apresentação do fluxo desse sistema que você está desenvolvendo.
    – Maison
    Commented 7/04/2022 às 14:02

3 Respostas 3

2

Segue uma solução.

$("#modal").click(function() {
  $('#myModal').modal('show');
});

$("#modal2").click(function() {
  $('#myModal2').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" id="modal" class="btn btn-default">Abrir modal</button>


<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" id="modal2" class="btn btn-success">Abrir modal 2</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

<div class="modal" id="myModal2">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading 2</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

1
  • Show! Vou tentar essa solução! :) Commented 18/06/2018 às 17:46
1

Não sei se é da forma que imagina, mas a única que existe é utilizando o método $(elemento).modal('show'), você estará sobrepondo modais.

Ficaria da seguinte forma:

Botão abrirá o primeiro modal da forma comum:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

No segundo modal, você vai colocar uma classe no botão que você quer utilizar para abrir o próximo modal:

...
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary openModal">Save changes</button>
</div>
...

Agora você vai abrir o modal via JavaScript com a própria API dos modais do Bootstrap:

$('.openModal').on('click', function(e) {
  $('#exampleModal2').modal('show');
});

Sendo que nesse caso, o id do meu outro modal é exampleModal2

-1

olá estava com mesmo problema. Porem descobri que o modal do BOOTSTRAP ele abre com forme a ordem que foi criado no html. ex: se a div do modal2 for criada primeiro que a do modal1 e no modal1 tentar chamar o modal2 ela vai ficar por trás. Porem se chamar no modal2 o modal1 o modal1 fica na frente

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 31/03/2022 às 13:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .