jquery - 将 Cookie 添加到花式框弹出窗口

Question

我有这个弹出窗口，我可以用它来不断弹出 - 我想给它添加一个 7 天的 cookie？这可能与我所拥有的吗？

<script type="text/javascript">
jQuery(document).ready(function() {
    $.fancybox(
        '<h2>' + {{ settings.popup_title | json }} + '</h2><p>' + {{ settings.popup_content | json }} + '</p>',
        {
             'autoDimensions'   : false,
            'width'                 : 450,
            'height'                : 'auto',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        }
    );
});
</script>

Answer 1

基于这个答案，你可以用你喜欢的方式调整代码：

function openFancybox() {
    setTimeout(function () {
        $.fancybox(
            '<h2>' + {
            {
                settings.popup_title | json
            }
        } + '</h2 > < p > ' + {
            {
                settings.popup_content | json
            }
        } + ' < /p>', {
            'autoDimensions': false,
            'width': 450,
            'height': 'auto',
            'transitionIn': 'none',
            'transitionOut': 'none'
        });
    }, 5000);
}
$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 7
    });
});

假设访问者没有清除浏览器的缓存/cookie，这将仅在第一次访问时和接下来的 7 天内在 5 秒（或您喜欢的时间）后触发 fancybox。

确保您已正确加载jQuery cookie 插件，以及 jQuery + fancybox js 和 css 文件。

Answer 2

<style>
#holidayPopupContent 
        {   display: none;
        }
        .fancybox-opened #holidayPopupContent { display: block; }
</style>
<div id="holidayPopupContent">
        test
    </div>

    <a href="#holidayPopupContent" id="holidayPopup"></a>

<script type="text/javascript">
function openFancybox() {
    setTimeout( function() 
    {
        jQuery("#holidayPopup").fancybox({
        'width': 880,
        'height': 670,
        'autoSize': false
    }).trigger('click');
        //jQuery('#holidayPopup').trigger('click'); 
        jQuery(".fancybox-skin").css("padding", "0px");
    },200);
}
jQuery(document).ready(function() {
    var visited = jQuery.cookie('visited');
    if (visited == 'yes') {
        return false;

    } else {
        openFancybox();
    }
    jQuery.cookie('visited', 'yes', { expires: 30 });

});
</script>