<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section></section> <section></section> <section></section> <section id="section_id"></section> <section></section> <div class="modal" id="scroll_modal" role="dialog" displayed="false"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <!-- Modal body --> <div class="modal-body"> <div class="close_bx"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><img src="img/close.png" alt="" class="img-fluid"></button> </div> <div class="s_md_cn"> <h2>Scroll Modal Show Bootstrap</h2> </div> </div> </div> </div> </div>

html, body { height: 100%; margin: 0; } section { height: 100vh; } section:nth-child(1) { background: lightblue; } section:nth-child(2) { background: lightgreen; } section:nth-child(3) { background: purple; } section:nth-child(4) { background: red; } section:nth-child(5) { background: yellow; }

$(window).scroll(function() { var position = $("#section_id").offset().top if ($(document).scrollTop() > position && $("#scroll_modal").attr("displayed") === "false") { $('#scroll_modal').modal('show'); $("#scroll_modal").attr("displayed", "true"); } }); $('#scroll_modal').on('shown.bs.modal', function () { $('html').css('overflow','hidden'); }).on('hidden.bs.modal', function() { $('html').css('overflow','auto'); });