2

Criei um formulário utilizando o Framework Bootstrap que abre em um Modal e este possui uma lista de dados que podem ser excluídos, mas exigem um confirmação.

Ocorre que ao clicar no botão "Sair" ou no "x" do modal de confirmação, tanto ele quanto o modal externo fecham.

No meu caso obrigatoriamente um modal tem de estar dentro do outro, e os exemplos que encontrei que funcionam os modal's são independentes, como neste exemplo.

Como consigo fazer isso?

Meu modal:

<div class="container">
    <h3>Modal Example</h3>
    <!-- Button to trigger modal -->
    <div>
        <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
    </div>

    <!-- MODAL EXTERNO -->
    <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>First Modal</h3>
        </div>
        <div class="modal-body">

            <!-- LINK QUE ABRE O MODAL INTERNO -->
             <a href="#myModal2" role="button" class="btn" data-toggle="modal">Launch Second Modal</a>

                <!-- MODAL INTERNO -->                
                 <div id="myModal2" class="modal multi hide" tabindex="-1" role="dialog">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="multi" aria-hidden="true">×</button>
                        <h3>Second Modal</h3>
                    </div>
                    <div class="modal-body">


                     </div>
                     <div class="modal-footer">
                         <button class="btn" data-dismiss="multi" aria-hidden="true">Close</button>
                         <button class="btn btn-primary">Save changes</button>
                     </div>
                  </div>                 

        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
4
  • Pela resposta da pergunta do SO que tens aí não conseguiste? É aquilo que queres, certo? Commented 15/07/2014 às 8:22
  • Uma idéia: Ao invés de abrir um segundo modal, que na minha percepção parece uma má prática, por poluir demais a tela do usuário, porque não adicionar um segundo botão de confirmação no primeiro modal? Ex: Você clica no close, e dá um .show() em uma div com estado inicial em .hide() e dentro desta div, uma confirmação com dois buttons, se cancelar, ativa o .hide() novamente, se confirmar, usa o script para o close do modal. Já tinha visto isto em um outro site, porque não faz muito sentido, chamar 2 modais... Commented 15/07/2014 às 12:38
  • Pois é. Não pretendo poluir demais a tela, mas é mais ou menos isso que você falou que estou querendo fazer. Dentro do Modal serão exibidas informações que podem ser excluídas, mas que exigem confirmações pelo usuário. Mas se criar uma div pra isso, estarei, de certa forma criando um "modal" de confirmação com um layout diferente, o que entendo também não ser a melhor opção. O que quero é isso aqui jsfiddle.net/h3WDq/5. porém com um modal dentro do outro.
    – robertaodj
    Commented 15/07/2014 às 13:23
  • Você pode utilizar esse plugin jakiestfu.github.io/Bootstrap-SubModal eu tentei aqui fazer da forma que você quer, mas não funciona, ou faz por javascript ou usa esse plugin Commented 15/07/2014 às 13:28

1 Resposta 1

2

Após alguns dias a solução:

Altere o parâmetro data-dismiss para qualquer nome diferente de modal para que o modal pai não seja fechado quando clicar em "Sair" ou no "x".

            <!-- MODAL INTERNO -->                
             <div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
                <div class="modal-header">
                    <button type="button" class="close-modal" data-dismiss="xmodal" aria-hidden="true">×</button>
                    <h3>Second Modal</h3>
                </div>
                <div class="modal-body">


                 </div>
                 <div class="modal-footer">
                     <button class="btn" data-dismiss="xmodal" aria-hidden="true">Close</button>
                     <button class="btn btn-primary close-modal">Save changes</button>
                 </div>
              </div>     

Inclua a class close-modal e aplique o jquery abaixo:

$('.close-ambiente').click(function() { 
    $('#modal2').modal('hide');
  }); 

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 .