Question

我目前正在使用fancybox在页面加载后2秒内通过弹出窗口传送内容。我希望每次加载网站上的页面时都要实现能够消除这种弹出的麻烦。

理想情况下，如果访问者点击了＆＃34;关闭＆＃34;在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)

我认为这可以使用js cookie来完成，但是我不确定语法是如何工作的，这取决于我尝试用两种不同的过期做法。

修改

这是用于弹出窗口的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>

我也尝试更新上面的功能以包含cookie，从我猜测的最佳值到无效：

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

编辑＃2 - 更新代码 使用下面@Rob建议的代码，我尝试将配置添加到fancybox以及超时，但是，没有运气。这里是JS小提琴：https://jsfiddle.net/30Lxfc6r/

Answer 1

我已经使用基于FancyBox文档的JSBin示例更新了我的答案。 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);
});

请注意，此示例只能使用一次，除非您删除Cookie或更改Cookie名称。

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

1 个答案: