Cập nhật cho năm 2018 - Sử dụng Bootstrap 4
Tôi thấy hầu hết các câu trả lời dường như có rất nhiều jQuery không cần thiết. Để mở một phương thức từ một phương thức khác có thể được thực hiện đơn giản bằng cách sử dụng các sự kiện mà Bootstrap cung cấp chẳng hạn như show.bs.modal. Bạn cũng có thể muốn một số CSS để xử lý các lớp phủ phông nền. Đây là 3 phương thức mở từ các tình huống khác ...
Mở phương thức từ một phương thức khác (giữ phương thức đầu tiên mở)
<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>
Một vấn đề tiềm ẩn trong trường hợp này là phông nền từ phương thức thứ 2 ẩn phương thức thứ nhất. Để ngăn chặn điều này, hãy thực hiện phương thức thứ 2 data-backdrop="static"và thêm một số CSS để sửa chỉ mục z của phông nền ...
/* 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
Mở phương thức từ một phương thức khác (đóng phương thức thứ nhất)
Điều này tương tự như trường hợp trên, nhưng vì chúng ta đang đóng phương thức thứ nhất khi phương thức thứ 2 được mở, nên không cần sửa CSS phông nền. Một hàm đơn giản xử lý show.bs.modalsự kiện phương thức thứ 2 đóng phương thức thứ nhất.
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
Mở phương thức bên trong một phương thức khác
Kịch bản nhiều phương thức cuối cùng đang mở phương thức thứ 2 bên trong phương thức thứ nhất. Trong trường hợp này, đánh dấu cho thứ 2 được đặt bên trong thứ nhất. Không cần thêm CSS hoặc 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