Delayed FancyBox open *WITH* "don't show this again" link

Question

So I'm attempting to combine the working solutions given in two different threads, I found here :

1) Delay pop-up for 10 seconds, only pop up once

2) FancyBox - "Don't show this message again" button?

I want my Fancybox to open after x seconds and then automatically close after xx seconds. I got that working just great!

Then when I want to add the link into my modal box that sets a cookie when the user clicks on that, to not ever show the box again to them for x days, it doesn't seem to set the cookie to do that effectively.

This is what I've got so far :

---

<script type="text/javascript">
    function openFancybox() {
        setTimeout( function() {$('#testbox').trigger('click'); }, 15000);
}
function dontshow(){
    $.fancybox.close(); // Use this line if I want the button to close fancybox.
    $.cookie('visited', 'yes', { expires: 7300 }); // Set the cookie.
}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
     $("#testBox").fancybox({
        'hideOnContentClick': false,
        'hideOnOverlayClick': true,
        'showCloseButton': true,
        'overlayShow': true,
        'overlayOpacity': 0.3,
    }); // ready
    setTimeout( function() {$.fancybox.close(); },22000); // additive, so 15secs + 7secs open time = 22 secs
});
</script>

---

Yes, I have the JQuery cookie script on my server.

I'm suspecting that calling openFancybox() twice might be the problem (I dunno much about Javascript) .. but when I try to stick the :

{
    setTimeout( function() {$('#testbox').trigger('click'); }, 15000);
} 

after this bit :

else {
        openFancybox()

... and I then just get lost with how many { and ; or ) I may / may not need!

(have tested endless combinations! .. a bit like trying to find a black cat in the dark when I don't really know what I'm doing .. just know what I want it to do!)

The inline code for my modal FancyBox box is :

<!-- INLINE FANCYBOX-->
  <a id="testbox" href="#target"></a>

<div style="display:none"><div id="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<br>
<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>
<br>
</div></div>

My test page URL : http://www.wayofthewomb.com/timed_pop_up_TESTER.html

Thank you for any suggestions / advice / guidance! So grateful for this amazing resource, here!

Answer 1

You've nearly got it, but there are a couple of problems:

• most importantly, you're missing the jquery.cookie dependency! This plugin is superceded by js-cookie. Include it in your page like:

  <script src='//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.min.js'></script>

• You've got some mismatched casing between your html and JS: note testbox vs testBox

Otherwise you're good to go!

Here's a working fiddle: http://jsfiddle.net/memeLab/pr1f1cys/8/

function openFancybox() {
    setTimeout(function () {
        $('#testbox').trigger('click');
    }, 5000);
}

function dontShow() {
    $.fancybox.close();
    // Set the cookie.
    Cookies('visited', 'yes', {
        expires: 7300
    });
}

$(document).ready(function () {
    var visited = Cookies('visited');
    if (visited == 'yes') {
        console.log('Theres a visited cookie');
        return false;
    } else {
        openFancybox();
    }
    // create an event listener: when #noShow is clicked, run dontShow
    $('#noShow').click(dontShow);

    $('#testbox').fancybox({
        'hideOnContentClick': false,
        'hideOnOverlayClick': true,
        'showCloseButton': true,
        'overlayShow': true,
        'overlayOpacity': 0.3
    });
    // additive, so 15secs + 7secs open time = 22 secs
    setTimeout(function () {
        $.fancybox.close();
    }, 22000);
});

I suggest creating the most basic, reduced example using jsfiddle or codepen, etc when asking this kind of question: it simplifies the issue, and means that when your test page inevitably disappears, Those Who Come After can still see the code.

---

There are a couple of other issues in your page that are worth checking out:

• looks like you're loading jquery more than once.. could be problematic!
• you've nested an html comment <!-- --> inside a <style> tag, which is may be throwing off the syntax highlighting in your editor (doens't make life any easier!).
• I suggest using a click handler on DocReady, rather than using the onClick html attribute (see #noShow)

Comment Syntax:

• html comments: <!-- commented out -->
• Javascript single line comments: // commented out
• Javascript multiline / block comments: /* commented \n out */
• CSS comments (may be multiline): /* commented out */

hope that helps!