Оновлення за 2018 рік - Використання Bootstrap 4
Я виявив, що більшість відповідей мають багато непотрібних jQuery. Відкрити модаль з іншого модалу можна просто, використовуючи події, які забезпечує Bootstrap, такі якshow.bs.modal . Вам також може знадобитися якийсь CSS для обробки фонових накладок. Ось 3 відкритих способу з інших сценаріїв ...
Відкрити модаль від іншого модалу (тримати перший модаль відкритим)
<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-й модальний спосіб 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