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

Displaying a Bootstrap Modal just once a Week with JQuery Cookie

我试图让我的模式每周只显示一次。对于用户在我的主页上访问的所有页面,这应该是有罪的。它自己的模态工作得很好。但是每次我重新加载页面或转到另一个页面时它都会出现。

提前致谢!

对于我使用的 cookie:

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

这是我的代码:

// 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 -->

目前,无论 cookie 设置如何,每次加载页面时都会设置模式超时。尝试将该块移动到设置 cookie 的函数中。这样,只有当 cookie 不存在时才会调用它。

// 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'
        });
    }
});