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

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证明相同。