Aggiornamento per il 2018: utilizzo di Bootstrap 4
Ho scoperto che la maggior parte delle risposte sembra contenere molte jQuery non necessarie. Per aprire un modale da un altro modale può essere fatto semplicemente utilizzando gli eventi forniti da Bootstrap comeshow.bs.modal . Potresti anche volere un po 'di CSS per gestire le sovrapposizioni di sfondo. Ecco le 3 modali aperte da altri scenari ...
Apri modale da un altro modale (mantieni aperto il primo modale)
<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>
Un potenziale problema in questo caso è che lo sfondo del 2 ° modale nasconde il 1 ° modale. Per evitare ciò, crea il 2 ° modale data-backdrop="static"e aggiungi un po 'di CSS per correggere gli z-index degli sfondi ...
/* 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
Apri modale da un altro modale (chiudi il primo modale)
Questo è simile allo scenario precedente, ma poiché stiamo chiudendo il primo modale quando viene aperto il secondo, non è necessaria la correzione CSS dello sfondo. Una semplice funzione che gestisce il 2 ° show.bs.modalevento modale chiude il 1 ° modale.
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
Apri modale all'interno di un altro modale
L'ultimo scenario con modalità multiple sta aprendo il 2 ° modale all'interno del 1 ° modale. In questo caso il markup per il 2 ° è posto all'interno del 1 °. Non sono necessari CSS o jQuery aggiuntivi.
<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