Javascript 使用cookies不显示基于特定操作的弹出窗口

我目前正在使用fancybox在页面加载2秒后以弹出窗口的形式交付内容。我想实现一些东西，消除每次加载站点上的页面时弹出窗口的烦恼

理想情况下，如果访问者单击fancybox上的“关闭”按钮，则弹出窗口直到第二天才会出现。如果访问者单击弹出窗口中的链接，则弹出窗口直到指定的稍后日期才会出现

以下是我当前用于弹出窗口的代码：

// 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)

我假设这可以使用JSCookie来完成，但我不确定基于我试图对两个不同的过期进行的操作，语法将如何工作

编辑：

以下是用于弹出窗口的HTML：

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

编辑#2——更新代码

---

使用下面@Rob建议的代码，我尝试将配置添加到fancybox以及超时，但是运气不好。下面是JS提琴：

我已经用一个基于fancybox文档的JSBin示例更新了我的答案。

---

请记住，除非您删除cookie或更改cookie名称，否则此示例仅适用一次。

您好！您是否考虑使用单个cookie？@misterwolf，我不太确定。也许cookie不是必需的，这可以通过HTML localstorage或其他方式实现。我愿意听取关于最佳实现的建议ion.Thinks？鉴于您已经在使用jQuery，请查看cookie库-@Rob谢谢！我已经看过了，但我甚至不确定从何处开始根据用户交互触发不同的过期日期。DOM存储+1。cookie会随每个HTTP请求一起发送：您的后端可能不关心这一点。谢谢@Rob。我不走运地尝试了一下。我想这是由于我的原始代码，包括超时：

setTimeout（function（）{$（“.fancybox”）.eq（0）.trigger（'click'）；}，2000）

…无论如何，我已经更新了原始帖子，以包含您建议的代码。@NWTech，这次我用一个例子更新了我上面的答案。一切似乎都正常。

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

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