Scroll content popup Bootstrap bằng jQuery là giải pháp phổ biến khi cần hiển thị nội dung dài trong modal.
Cách làm này giúp popup có thanh cuộn riêng, tránh tràn nội dung và giữ giao diện website gọn gàng, dễ sử dụng.

Gợi ý các bài viết có liên quan:
jQuery canh nút back to top với footer
jQuery tự động tính chiều cao header

Các bước thao tác để scroll content popup Bootstrap bằng jQuery

Thêm Link CSS và jquery Bootstrap popup

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Thêm html Link khi nhấn sẽ scroll với nội dung

<a data-toggle="modal" data-target="#myModal" data-section="section-1" tabindex="1"> Launch modal 1</a>
<a data-toggle="modal" data-target="#myModal" data-section="section-2" tabindex="2"> Launch modal 2</a>
<a data-toggle="modal" data-target="#myModal" data-section="section-3" tabindex="3"> Launch modal 3</a>

Thêm html tạo popup bootstrap

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close"
                    data-dismiss="modal">&times;</button>
            </div> <!-- Modal body -->
            <div class="modal-body">
                <div id="section-1">
                    <h1>section-1</h1>
                    <div class="red"></div>
                </div>
                <div id="section-2">
                    <h1>section-2</h1>
                    <div class="green"></div>
                </div>
                <div id="section-3">
                    <h1>section-3</h1>
                    <div class="blue"></div>
                </div>
            </div> <!-- Modal footer -->
            <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Thêm Jquery để nhấn vào chạy nội dung

$(document).ready(
    function () { 
        $('#myModal').on('shown.bs.modal', function (event) { 
            // reset the scroll to top 
            $('#myModal .modal-body').scrollTop(0); 
            // get the section using data 
            var section = $(event.relatedTarget).data('section'); 
            // get the top of the section 
            var sectionOffset = $('#' + section).offset().top - 100; 
            //scroll the container 
            $('#myModal .modal-body').animate({ scrollTop: sectionOffset}, "slow"); 
        }); 
    }
);

Ví dụ scroll content popup Bootstrap bằng jQuery

CodePen