スクロールしたパーセンテージを1回だけ表示した後にページ読み込み時にブートストラップモーダルを表示

これはほとんど動作していますが、ロジックが不足しているようです。スクロールするときに誰かがページを70％ダウンさせたら、ブートストラップモーダルを表示したい。それは動作しますが、モーダルを閉じると、私はページ上でまだ70％になっているので、再び開きます。どのように私はそれを閉じた後に一度だけモーダルを開くすべてのアイデア？スクロールしたパーセンテージを1回だけ表示した後にページ読み込み時にブートストラップモーダルを表示

$(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); 
    }); 
});

出典

2017-11-10 Amy Andrews

申し訳ありません私はモーダルを一度開いて、それを閉じた後にもう一度やり直すしかないと思っていましたか？閉じませんでしたか？ –

closeイベントをインターセプトし、すべてのクラスを強制終了しますか？ –

表示されたクラスをモーダルに追加してください。クラスが存在する場合は、再度表示しないでください。

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

    }

出典

2017-11-10 19:13:10

あなたの助けをありがとう、それは素晴らしい作品！ –

あなたはグローバル変数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 
 
\t if(!modalOpened){ 
 
\t \t firePopup(); 
 
\t } 
 
    } 
 

 
    function firePopup() { 
 
    $('#myModal').modal('show'); 
 
\t 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{ 
 
\t background: gold; 
 
\t width: 100vw; 
 
\t 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" /> \t 
 
</head> 
 
<body> 
 
<div class="app"></div> 
 
\t <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> \t 
 
<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>

注ブラウザがリロードしたら、これはあなたが一度毎日または週またはこのような何かを、それを表示したい場合、あなたはクッキーやのlocalStorageを使用する必要があり、保持されません。

出典

2017-11-10 19:44:06 azs06

スクロールしたパーセンテージを1回だけ表示した後にページ読み込み時にブートストラップモーダルを表示

答えて

関連する問題