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>
.show()
em umadiv
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 oclose
do modal. Já tinha visto isto em um outro site, porque não faz muito sentido, chamar 2 modais...