使用JQuery Cookie每周只显示一次Bootstrap模式

Question

I am trying to get my modal only displayed once a week. This should be guilty for all pages the user visits on my homepage. The modal it self works just fine. But it appears each time I reload the page or go to another page.

Thanks a lot in advance!

For the cookie I use this:

https://github.com/js-cookie/js-cookie

Here is my code:

 // MODAL APPEAR AFTER 2 SECONDS setTimeout(function() { $('#newsletter-modal').modal(); }, 2000); // MODAL COOKIE FOR 7 DAYS $(function() { if($.cookie('alreadyShow') === null) { $.cookie('alreadyShow', true, {expires: 7}); $('#newsletter-modal').modal({ display: 'block' }); } }); 

 <script type="text/javascript" src="/js/js.cookie.js"></script> <div class="modal fade" id="newsletter-modal"> <div class="modal-dialog"> <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> <h1 class="modal-title">Modal Headline</h1> </div> <div class="modal-body"> <p>Modal content goes here</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary newsletter-modal-close" data-dismiss="modal">Yes</button> <button type="button" class="btn btn-default newsletter-modal-close" data-dismiss="modal">No</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 1

Currently, the Timeout for your modal gets set every time the page is loaded, regardless of the cookie settings. Try moving that block into the function where you set the cookie. That way, it only gets called when a cookie doesn't already exist.

// MODAL COOKIE FOR 7 DAYS
$(function() {
    if($.cookie('alreadyShow') === null) {
        // MODAL APPEAR AFTER 2 SECONDS
        setTimeout(function() {
            $('#newsletter-modal').modal();
        }, 2000);

        $.cookie('alreadyShow', true, {expires: 7});

        $('#newsletter-modal').modal({
            display: 'block'
        });
    }
});