javascript - 使用 JQuery Cookie 每周仅显示一次 Bootstrap 模态

Question

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

提前非常感谢!

对于 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 -->

Answer 1

目前，无论 cookie 设置如何，每次加载页面时都会设置模式的超时。尝试将该 block 移动到设置 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'
        });
    }
});