最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - FancyBox - "Don't show this message again" button? - Stack Overflow

programmeradmin1浏览0评论

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

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

Share Improve this question edited Aug 20, 2014 at 16:16 pkExec 2,0961 gold badge23 silver badges42 bronze badges asked Dec 12, 2012 at 14:14 LiamLiam 111 silver badge2 bronze badges 1
  • possible duplicate of Delay pop-up for 10 seconds, only pop up once – JFK Commented Dec 12, 2012 at 18:56
Add a ment  | 

2 Answers 2

Reset to default 6

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

There's a great jQuery plugin for cookie management which you should check out - https://github./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 });
    }
});
发布评论

评论列表(0)

  1. 暂无评论