仅在滚动百分比一次后在页面加载时显示Bootstrap模态
[英]Show Bootstrap modal on page load after scrolled percentage only once
问题描述
我几乎可以正常工作，但似乎缺少一些逻辑。 我希望当有人在滚动时向下滚动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);
});
});
2 个解决方案
解决方案1
1 已采纳 2017-11-10 19:13:10
在显示模态后将其添加到模态中，如果存在类，则不要再次显示它。
function firePopup() {
if(!$('#myModal').hasClass('displayedOnce')){
$('#myModal').modal('show');
$('#myModal').addClass('displayedOnce');
}
}
解决方案2
0 2017-11-10 19:44:06
您可以创建一个全局变量modalOpened并将其设置为false ，并在模式打开时将其设置为true 。 然后，您可以检查modalOpened ，如果它为false ，则仅显示模式。 这样的事情。
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); }); });
.app{ background: gold; width: 100vw; height: 100vh; }
<!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">×</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>
请注意，在重新加载浏览器后，该设置将不会持续，如果您想每天或每周显示一次，或类似的操作，则必须使用Cookie或localStorage。
加载带有引导程序模式的ajax页面，并一次自动启动该模式
[英]load ajax page with bootstrap modal in it, and auto launch that modal, all at once
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.