I"m currently using a fancybox to deliver content in a popup 2 seconds after a page loads. I'd like implement something that would remove the annoyance of this popping up every single time a page on the site is loaded.

Ideally, if a visitor clicked the "close" button on the fancybox, the pop-up wouldn't appear for them until the next day. If the visitor clicked the link that's in the popup, then the popup wouldn't appear until a specified later date.

Here's the code I'm currently using for the popup:

// fancybox arguments
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0,
        'autoDimensions': false,
        'autoSize': false,
        'width': '650', 
        'height': 'auto'
    });


// Launch fancyBox on first element
setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)

I assume this can be done using js cookie, but i'm not sure how the syntax would work based off what I'm trying to do with two different expirations .

EDIT:

Here's the HTML that is used for the pop-up:

<div style="display:none">
    <a class="fancybox" href="#donation-info" alt=""/></a>
    <div id="donation-info">
        <?php if (get_field('donation_box_text', 'option')){
            echo '<h2>To all our readers:</h2>';
            echo '<p>' . get_field('donation_box_text', 'option') . '</p>';
            echo '<div style="text-align:center"><a href="' . get_field('donation_link', 'option') . '" id="donate" class="donate-link" />Donate</a></div>';
        }; ?>

    </div>
</div>

I also tried updating the above function to include cookies, from the best of my guesstimation, to no avail:

$(document).ready(function() {
        if ($.cookie('noShowDonation')) $('.fancybox').hide();
    else {
        $("#donate").click(function() {
            // fancybox arguments
                $(".fancybox")
                    .attr('rel', 'gallery')
                    .fancybox({
                        padding : 0,
                        'autoDimensions': false,
                        'autoSize': false,
                        'width': '650', 
                        'height': 'auto'
                    });

            // Launch fancyBox on first element
                setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)
                        $.cookie('noShowDonation', true);    
                    });
                }
            });

EDIT #2 -- Updated code Using the code suggested by @Rob below, I tried adding the configurations to the fancybox as well as the timeout, however, no luck. Here's the JS Fiddle: /

I"m currently using a fancybox to deliver content in a popup 2 seconds after a page loads. I'd like implement something that would remove the annoyance of this popping up every single time a page on the site is loaded.

Ideally, if a visitor clicked the "close" button on the fancybox, the pop-up wouldn't appear for them until the next day. If the visitor clicked the link that's in the popup, then the popup wouldn't appear until a specified later date.

Here's the code I'm currently using for the popup:

// fancybox arguments
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0,
        'autoDimensions': false,
        'autoSize': false,
        'width': '650', 
        'height': 'auto'
    });


// Launch fancyBox on first element
setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)

I assume this can be done using js cookie, but i'm not sure how the syntax would work based off what I'm trying to do with two different expirations .

EDIT:

Here's the HTML that is used for the pop-up:

<div style="display:none">
    <a class="fancybox" href="#donation-info" alt=""/></a>
    <div id="donation-info">
        <?php if (get_field('donation_box_text', 'option')){
            echo '<h2>To all our readers:</h2>';
            echo '<p>' . get_field('donation_box_text', 'option') . '</p>';
            echo '<div style="text-align:center"><a href="' . get_field('donation_link', 'option') . '" id="donate" class="donate-link" />Donate</a></div>';
        }; ?>

    </div>
</div>

I also tried updating the above function to include cookies, from the best of my guesstimation, to no avail:

$(document).ready(function() {
        if ($.cookie('noShowDonation')) $('.fancybox').hide();
    else {
        $("#donate").click(function() {
            // fancybox arguments
                $(".fancybox")
                    .attr('rel', 'gallery')
                    .fancybox({
                        padding : 0,
                        'autoDimensions': false,
                        'autoSize': false,
                        'width': '650', 
                        'height': 'auto'
                    });

            // Launch fancyBox on first element
                setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)
                        $.cookie('noShowDonation', true);    
                    });
                }
            });

EDIT #2 -- Updated code Using the code suggested by @Rob below, I tried adding the configurations to the fancybox as well as the timeout, however, no luck. Here's the JS Fiddle: https://jsfiddle/30Lxfc6r/

• javascript
• jquery
• cookies
• popup

• hi! have you in mind the use of single cookie? – misterwolf Commented Feb 9, 2017 at 10:33
• @misterwolf, I'm not really sure. Maybe a cookie isn't necessary and this can be acplished with HTML localstorage or something. I'm open to suggestions for the best implementation. Thoughts? – NW Tech Commented Feb 9, 2017 at 16:18
• Seeing as you're already using jQuery, check out the cookie library - github./carhartl/jquery-cookie – fubar Commented Feb 13, 2017 at 22:21
• @Rob thanks! I've had a look at that, but i'm not even sure where to start to trigger different expiration dates based on user interaction. – NW Tech Commented Feb 14, 2017 at 17:37
• +1 for DOM storage. Cookies get sent along with every HTTP request: your backend probably doesn't care about this. – Kyle Gilbertson Commented Feb 20, 2017 at 16:25

1 Answer 1

I've updated my answer with a JSBin example based on the FancyBox docs. https://jsbin./bajocosese/edit?html,console,output http://fancyapps./fancybox/#docs

$(function () {
  // Define cookie name
  var cookieName = 'hide_donate';

  // Configure fancyBox
  $('.fancybox').fancybox({
      autoDimensions: false,
      autoSize: false,
      height: 'auto',
      padding: 0,
      width: 650,
      beforeLoad: function() {
        // Returning false will stop fancybox from opening
        return ! $.cookie(cookieName);
      },
      afterClose: function() {
        // Set cookie to hide fancybox for 1 day
        $.cookie(cookieName, true, { expires: 1 });
      }
  });

  // Handle donate click event
  $('a#donate').on('click', function (event) {
      event.preventDefault(); 

      // Hide fancybox and set cookie to hide fancy box for 7 days
      $.fancybox.close();
      $.cookie(cookieName, true, { expires: 7 });
  });

  // Launch fancyBox on first element
  setTimeout(function () {
      $(".fancybox").trigger('click');
  }, 2000);
});

Remember, this example will only work once, unless you delete the cookie, or change the cookie name.