Question

我有这个几乎工作，但似乎缺少一些逻辑。我希望当滚动时某人在页面上下载70％时会出现引导模式。它可以工作，但当我关闭模态时，它会再次打开，因为我仍然在页面上的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');
  }

  }

Answer 2

您可以创建一个全局变量modalOpened并将其设置为false，并在模态打开时将其设置为true。然后，您可以检查modalOpened并仅显示模式false。这样的事情。

＆＃13;

var modalOpened = false;
$(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
	  if(!modalOpened){
		  firePopup();  
	  }
  }

  function firePopup() {
    $('#myModal').modal('show');
	modalOpened = true;  
  }

  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);
  });
});

＆＃13;

.app{
	background: gold;
	width: 100vw;
	height: 100vh;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Modal</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />	
</head>
<body>
<div class="app"></div>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias illo doloremque voluptate numquam corporis exercitationem, nemo voluptatibus fuga magni labore voluptas et porro necessitatibus nulla accusantium omnis vitae perspiciatis. Maiores veniam excepturi praesentium cum aliquid ratione tempora blanditiis repudiandae dolorum distinctio quo ad facere, est similique. Distinctio odit debitis quae aliquid commodi aperiam, asperiores aut, adipisci sunt quod cum placeat nemo facere iusto, laudantium earum quis quasi atque rerum. Dolorem porro reprehenderit, repellendus obcaecati a sapiente deserunt eligendi, reiciendis incidunt atque officiis animi aliquam esse cumque rerum debitis dignissimos veritatis, non ullam earum hic maiores neque magni at! Sapiente nostrum debitis atque repellat porro earum ipsum et, nobis iure, autem amet tempore doloremque dignissimos, asperiores ullam quo aliquid repellendus ea obcaecati eos voluptatem deleniti optio! Architecto cum a dolor aliquam nam ex illo ipsum dolorem expedita, fugiat! Non, dolores totam aliquam fugiat et nobis. Ab illo, pariatur adipisci mollitia cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil pariatur quas commodi aspernatur sequi minus adipisci quam eveniet labore aut molestiae dolores corporis numquam, dolore consequuntur unde laudantium sed illo facere rerum tenetur, fuga! Error nam ipsa, facilis enim porro at! Non, officiis, omnis. Sed quia quam, deleniti nostrum officia consectetur. Quam nemo incidunt magnam ut aspernatur obcaecati non tenetur quidem inventore, asperiores quaerat. Saepe amet temporibus, reiciendis deserunt, repellendus eum accusantium iure. Incidunt enim nisi quae rerum maiores iste reiciendis, voluptates culpa in maxime numquam tenetur rem, tempora cumque expedita praesentium eum dolor! Rerum nemo magni doloribus, voluptatem quisquam impedit tempora, repudiandae architecto perspiciatis quo at aliquid dolor voluptate voluptates, numquam recusandae quasi asperiores soluta deserunt adipisci eius provident quidem odio. Sit aperiam impedit voluptatem ipsum incidunt consequatur pariatur, similique natus enim, officiis officia dolor voluptatum! Rerum reiciendis, illo commodi ea corporis distinctio necessitatibus quidem! Quidem qui autem, consequuntur tempora praesentium saepe officia ipsam harum iure doloribus cumque culpa ipsa, ad accusamus aliquid pariatur animi! Animi accusantium id, ad consequuntur illo, porro similique quisquam, fugit harum dolore quasi facilis impedit tenetur quibusdam placeat et doloribus excepturi perspiciatis hic labore ex doloremque? Nam, voluptas, aspernatur. Quia temporibus odit, reiciendis fugit.</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>	
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

请注意，一旦浏览器重新加载，这将不会保留，如果您想每天或每周显示一次或类似的内容，则必须使用cookie或localStorage。

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

2 个答案: