僅在滾動百分比一次后在頁面加載時顯示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.