javascript - 仅在滚动百分比一次后在页面加载时显示 Bootstrap 模态

Question

我几乎可以正常工作，但似乎缺少一些逻辑。我希望当有人在滚动页面时达到 70% 时出现 Bootstrap 模式。它可以工作，但是当我关闭模式时，它会再次重新打开，因为我仍然在页面上的 70%。知道如何在关闭模式后只打开一次模式吗？

$(document).scroll(function(e){
  var scrollAmount = $(window).scrollTop();
  var documentHeight = $(document).height();
  var scrollPercent = (scrollAmount / documentHeight) * 100;

  if(scrollPercent > 70) {
      // Popup in view after 70% scroll
     firePopup();
  }

  function firePopup() {
    $('#myModal').modal('show');
  }

  function reposition() {
      var modal = $(this),
      dialog = modal.find('.modal-dialog');
      modal.css('display', 'block');
      dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
  }
  $('.modal').on('show.bs.modal', reposition);
  $(window).on('resize', function() {
      $('.modal:visible').each(reposition);
  });
});

Answer 1

一旦显示就将类添加到模态，如果类存在则不再显示。

function firePopup() {
  if(!$('#myModal').hasClass('displayedOnce')){
      $('#myModal').modal('show');
      $('#myModal').addClass('displayedOnce');
  }

  }