FancyBox - “Don't show this message again” button?

Question

I have FancyBox on a website that pops up when they visit and has some info inside it. I\'d like to add some kind of button that the user can click, and it

Answer 1

Apart from your function that launches fancybox, make another that set the cookie's value and expiration time when the button is clicked :

function dontShow(){
 $.fancybox.close(); // optional
 $.cookie('visited', 'yes', { expires: 30 }); // set value='yes' and expiration in 30 days
}

... then validate the cookie and decide whether to launch fancybor or not :

$(document).ready(function() {
    var visited = $.cookie('visited'); // create cookie 'visited' with no value
    if (visited == 'yes') {
        return false;
    } else {
        openFancy(); // cookie has no value so launch fancybox on page load
    }
  $('#autoStart').fancybox(); // bind fancybox to selector
}); // ready

... now the html of your button

<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>

See working DEMO

Answer 2

There's a great jQuery plugin for cookie management which you should check out - https://github.com/carhartl/jquery-cookie

When a user hits your site, you can check your cookie to see if they've been there before. If they haven't then display your animation and set the cookie. If they have then don't run the animation.

From a glance at the jquery-cookie docs, you can set a cookie for 7 days like so: $.cookie('visited', 'yes', { expires: 7 }); So your code might look like:

// Make sure DOM has fully loaded before running code
$(function(){
    if( ! $.cookie('visited')){
        // Your code here
    } else {
        $.cookie('visited', 'yes', { expires: 7 });
    }
});