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 sets a cookie not to show the message for about a month or so.

I'm quite useless when it comes to things like this, so if anyone could walk me though what to do, that would be awesome.

Here's what I have so far. At the bottom I've added what I think could be an anchor for the proposed cookie ("noShow"), but I'm not sure if it would work like it is. I've loaded all the jQuery scripts before this for FancyBox, and after those it loads jquery.cookie.js too. If it matters, I'm using whatever the latest download for FancyBox 2 is.

<script type="text/javascript"> 
function openFancy() { 
setTimeout( function() {$('#autoStart').trigger('click'); },1000);
} 

$(document).ready(function() {
    openFancy();
    $('#autoStart').fancybox();
});
</script>

<!-- This is the popup itself -->
<a id="autoStart" style="display:none" href="#autoFancybox"></a>
 <div style="display: none;">
  <div id="autoFancybox" style="width: 800px">
   <div>
    <!-- My content for the Fancybox is here -->
    <br />
    <p style="font-size:10px" align="right">
    <a id="noShow" href="#noShow">Don't me show this message again</a>
    </p>
   </div>
  </div>
 </div>

Thanks, Liam.

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