Question

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

提前多多感谢！

对于我使用的cookie：

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

目前，无论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'
        });
    }
});

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

1 个答案: