Na documentação do bootstrap pode-se ler um alerta dizendo que a sobreposição de janelas modais não é suportada, sendo assim você poderá ter alguns problemas fazendo isso que deseja.
Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
O bootstrap possui uma limitação com as janelas modais por não gerenciar o z-index
. Por isso, ao abrir uma modal sobre outra acontecerá vários erros como por exemplo o que estava ocorrendo com você de um fundo ficar abaixo do outro ou fechar as duas janelas abertas ao mesmo tempo.
Algumas soluções para esse problema já foram encontradas.
1 - Solução via CSS
Se você sempre possuir no máximo duas janelas abertas um sobre a outra, você pode controlar diretamente pelo CSS
HTML
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
CSS
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}
Javascript
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
2 - Solução baseado em eventos do plugin do bootstrap
O plugin do bootstrap possui eventos que podem ser escutados para executar alguma funcão necessária.
Veja o exemplo no jsfiddle
$('.modal').on('show.bs.modal', function(event) {
var idx = $('.modal:visible').length;
$(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
$('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
$('.modal-backdrop').not('.stacked').addClass('stacked');
});
$('.modal').on('hidden.bs.modal', function(event) {
if ($('.modal:visible').length > 0) {
setTimeout(function() {
$(document.body).addClass('modal-open');
}, 0);
}
});
3 - Solução alterando o plugin do bootstrap
Localize o código abaixo
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
e altere para
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$backdrop
.css("z-index", (1030 + (10 * $(".modal.fade.in").length)))
that.$element
.css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
Existem plugin que complementam o bootstrap, busque por "Bootstrap Manager" que irá encontrar vários.
Fonte