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

为模态添加属性，例如NSData并设置一个值，您可以将其用作标记，以便显示一次或不显示。并在滚动时检查属性值。并在显示一次后更改它。

所以你的HTML应该是这样的，

displayed

并且调用模态的脚本标记应该类似于

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

以下jsFiddle证明了这一点。

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

1 个答案: