Обновление на 2018 год - использование Bootstrap 4
Я обнаружил, что в большинстве ответов много ненужного jQuery. Открыть модальное окно из другого модального окна можно просто с помощью событий, которые предоставляет Bootstrap, напримерshow.bs.modal . Вы также можете захотеть использовать CSS для обработки наложений фона. Вот 3 открытых модальных окна из других сценариев ...
Открыть модальный из другого модального окна (оставить 1-й модальный открытым)
<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>
Потенциальная проблема в этом случае заключается в том, что фон из 2-го модального окна скрывает 1-й модальный. Чтобы предотвратить это, сделайте второй модальным data-backdrop="static"и добавьте немного CSS, чтобы исправить z-индексы фонов ...
/* 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
Открыть модальный из другого модального окна (закрыть 1-й модальный)
Это похоже на описанный выше сценарий, но, поскольку мы закрываем 1-е модальное окно при открытии 2-го, исправление фонового CSS не требуется. Простая функция, которая обрабатывает второе модальное show.bs.modalсобытие, закрывает первое модальное окно.
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
Открыть модальный внутри другого модального
Последний сценарий с несколькими модальными окнами открывает 2-е модальное окно внутри 1-го. В этом случае разметка для 2-го размещается внутри 1-го. Никаких дополнительных CSS или 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