Gặp vấn đề tương tự, viết điều này ở đây để phòng trường hợp ai đó trong tương lai tình cờ gặp phải vấn đề này và gặp sự cố với nhiều phương thức phải có cuộn (Tôi đang sử dụng Bootstrap 3.3.7)
Những gì tôi đã làm là có một nút như thế này bên trong phương thức đầu tiên của tôi:
<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>
Nó sẽ ẩn phương thức đầu tiên và sau đó hiển thị phương thức thứ hai, và trong phương thức thứ hai, tôi sẽ có một nút đóng trông như thế này:
<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>
Vì vậy, điều này sẽ đóng phương thức thứ hai và mở phương thức đầu tiên và để thực hiện công việc cuộn, tôi đã thêm vào tệp .css của mình dòng này:
.modal {
overflow: auto !important;
}
Tái bút: Chỉ là một lưu ý nhỏ, bạn phải có các phương thức này riêng biệt, phương thức phụ không thể được lồng vào phương thức đầu tiên khi bạn ẩn phương thức đầu tiên
Vì vậy, đây là ví dụ đầy đủ dựa trên ví dụ về phương thức bootstrap:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Add lorem ipsum here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
Open second modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal">Close</button>
</div>
</div>
</div>
</div>