Bootstrap Snippet Bootstrap Modal Shon on Section id using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(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');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Modal Shon on Section id "
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"Bootstrap Modal Shon on Section id " Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"Bootstrap Modal Shon on Section id "
Bootstrap 4.1.1 Snippet by Shivamsemisetia