Update für 2018 - Verwenden von Bootstrap 4
Ich fand, dass die meisten Antworten eine Menge unnötiger jQuery enthalten. Das Öffnen eines Modals von einem anderen Modal aus kann einfach mithilfe der von Bootstrap bereitgestellten Ereignisse erfolgen, z show.bs.modal. Möglicherweise möchten Sie auch, dass CSS die Hintergrundüberlagerungen verarbeitet. Hier sind die 3 offenen Modal aus anderen Szenarien ...
Modal von einem anderen Modal öffnen (1. Modal offen halten)
<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>
Ein mögliches Problem in diesem Fall ist, dass der Hintergrund des 2. Modals das 1. Modal verbirgt. Um dies zu verhindern, machen Sie das 2. Modal data-backdrop="static"und fügen Sie etwas CSS hinzu, um die Z-Indizes der Hintergründe zu korrigieren ...
/* 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
Modal von einem anderen Modal öffnen (1. Modal schließen)
Dies ähnelt dem obigen Szenario, aber da wir das erste Modal schließen, wenn das zweite geöffnet wird, ist die CSS-Korrektur im Hintergrund nicht erforderlich. Eine einfache Funktion, die das show.bs.modalEreignis " 2. Modal" behandelt , schließt das 1. Modal.
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
Modal in einem anderen Modal öffnen
Das letzte Szenario mit mehreren Modalitäten ist das Öffnen des 2. Modals innerhalb des 1. Modals. In diesem Fall wird das Markup für das 2. innerhalb des 1 platziert. Es wird kein zusätzliches CSS oder jQuery benötigt.
<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