如何在窗口滚动的特定高度触发引导模式，只需一次？

Question

当垂直滚动条位置超过指定的限制时，我想向用户显示一个模态窗口。

这是我的HTML代码

      <div class="container">
          <h2>Modal Example</h2>
          <!-- Trigger the
      modal with a button -->
          <!-- Modal -->
          <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog">
                  <!-- Modal content-->
                  <div class="modal-content">
                      <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Modal Header</h4>
                      </div>
                      <div class="modal-body">
                          <p>Some text in the modal.</p>
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <script>
      $(window).scroll(function() {
          if ($(document).scrollTop() > 1000) {
              $('#myModal').modal('show');
          }
      });
      </script>
      <p>
          Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. 
          Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard cupidatat direct trade seitan put a bird on it occaecat 
          small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in 
          carles, vinyl chillwave. Beard sapiente nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art 
          party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free eiusmod quis aute lo-fi. 
          Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future. > </p>

Answer 1

向您的模式中添加一个属性，例如displayed，并设置一个值，该值可以用作一个标志，用于显示一次或不显示一次。并在滚动中检查属性值。并在显示一次之后更改它。

所以你的html应该是，

<div class="modal fade" id="myModal" role="dialog" displayed="false">

调用模式的脚本标记应该是这样的，

    $(window).scroll(function() {
       if ($(document).scrollTop() > 3000 && $("#myModal").attr("displayed") === "false") {
         $('#myModal').modal('show');
         $("#myModal").attr("displayed", "true");
       }
     });

下面是jsFiddle展示了同样的东西。