Atualização para 2018 - Usando Bootstrap 4
Descobri que a maioria das respostas parece ter muito jQuery desnecessário. Para abrir um modal de outro modal pode ser feito simplesmente usando os eventos que o Bootstrap fornece, como show.bs.modal. Você também pode querer algum CSS para lidar com as sobreposições de fundo. Aqui estão os 3 modais abertos de outros cenários ...
Abrir modal a partir de outro modal (manter o 1º modal aberto)
<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">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</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">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
..
</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>
Um problema potencial neste caso é que o pano de fundo do 2º modal oculta o 1º modal. Para evitar isso, faça o segundo modal data-backdrop="static"e adicione algum CSS para corrigir os Z-indexes dos cenários ...
/* modal backdrop fix */
.modal:nth-of-type(even) {
z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
z-index: 1051 !important;
}
https://www.codeply.com/go/NiFzSCukVl
Abrir modal a partir de outro modal (fechar 1o modal)
Isso é semelhante ao cenário acima, mas como estamos fechando o primeiro modal quando o segundo é aberto, não há necessidade de corrigir o CSS do pano de fundo. Uma função simples que manipula o 2º show.bs.modalevento modal fecha o 1º modal.
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
Abrir modal dentro de outro modal
O último cenário de múltiplos modais está abrindo o 2º modal dentro do 1º modal. Neste caso, a marcação para o 2º é colocada dentro do 1º. Nenhum CSS ou jQuery extra é necessário.
<div class="modal" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
</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>
https://www.codeply.com/go/iSbjqubiyn