Aktualizacja na 2018 rok - przy użyciu Bootstrap 4
Zauważyłem, że większość odpowiedzi zawiera dużo niepotrzebnego jQuery. Aby otworzyć modal z innego modalu, można po prostu użyć zdarzeń, które zapewnia Bootstrap, takich jak show.bs.modal. Możesz również chcieć, aby niektóre arkusze CSS obsługiwały nakładki tła. Oto 3 otwarte modalne z innych scenariuszy ...
Otwórz modal z innego modalu (pozostaw pierwszy modal otwarty)
<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>
Potencjalnym problemem w tym przypadku jest to, że tło z drugiego modułu ukrywa pierwszy moduł. Aby temu zapobiec, utwórz drugi modal data-backdrop="static"i dodaj trochę CSS, aby naprawić indeksy z tła ...
/* 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
Otwórz modal z innego modalu (zamknij pierwszy modal)
Jest to podobne do powyższego scenariusza, ale ponieważ zamykamy pierwszy modal, gdy drugi jest otwarty, nie ma potrzeby poprawiania tła CSS. Prosta funkcja obsługująca drugie show.bs.modalzdarzenie modalne zamyka pierwszy modal.
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
Otwórz modal w środku innego modalu
Ostatnim scenariuszem z wieloma trybami jest otwarcie drugiego modalu wewnątrz pierwszego modalu. W tym przypadku znacznik drugiego miejsca jest umieszczony wewnątrz pierwszego. Nie jest potrzebny żaden dodatkowy CSS ani jQuery.
<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