Using cookies to not show a popup based on particular actions

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.

  • Jquery cookie not detect no exist
  • HTML5 localstorage fallback
  • HTML5 Web Storage vs Cookies
  • How to kill zombie cookies
  • Detecting if a browser is using Private Browsing mode
  • How to achieve a Safe (!) authentication system in an angularjs app?
  • 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.net/30Lxfc6r/

  • Setting Cookies across sub domain javascript pitfall
  • Cookie not set until a second refresh
  • Why doesn't document.cookie show all the cookie for the site?
  • Parsing JSON string in Rails from Cookie generated by JavaScript
  • Overriding assignment operator in JS
  • Google analytics illegal cookie breaks Python backend
  • One Solution collect form web for “Using cookies to not show a popup based on particular actions”

    I’ve updated my answer with a JSBin example based on the FancyBox docs.
    https://jsbin.com/bajocosese/edit?html,console,output
    http://fancyapps.com/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.