Add Cookie to Fancy Box Popup

问题

I have this POPUP I can use to popup constantly - I wanted to add a 7 day cookie to it? Is that possible with what I have?

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

回答1:

Based on this answer, you can tweak the code with what you have like :

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

This will trigger fancybox after 5 seconds (or the time you prefer) on first visit only and during the following 7 days, assuming that the visitors haven't cleared their browser's cache/cookies.

Make sure you have properly loaded the jQuery cookie plugin, as well as jQuery + fancybox js and css files.

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

来源：https://stackoverflow.com/questions/18833775/add-cookie-to-fancy-box-popup

标签

jquery

popup

fancybox