Question

我正在使用Fancybox 3，Cookie，并且在页面加载后显示隐藏的内容。

隐藏的内容具有图像和外部链接。

我在外部链接方面苦苦挣扎。

这是我的示例代码：

HTML：

<div class="popup">
  <a href="https://google.com" target="_blank" >
    <img src="/uploads/my-image.jpg" />
  </a>
</div>

CSS：

.popup {
  display:none;
}

jQuery：

<script src="/js/cookie/js.cookie.js"></script>
<script>
  $(document).ready(function() {
    var check_cookie = Cookies.get('popup');
    var date = new Date();
    var minutes = 0.1;
    date.setTime(date.getTime() + (minutes * 60 * 1000));

    if(check_cookie == null) {
      Cookies.set('popup', 'value', { expires: date });

      $('.popup').fancybox({
        transitionEffect : "zoom-in-out",
      }).trigger('click');
    }
  });
</script>

页面加载后，Fancybox正在初始化隐藏的内容并显示图像。出现光标，但是图像不可单击，因此URL无法使用。

可能是什么问题？

Answer 1

首先，为什么要编写这样的代码？ -

$('.popup').fancybox({
      transitionEffect : "zoom-in-out",
}).trigger('click');

这是完全错误的！这里发生了什么-将click事件（启动fancybox）附加到元素，然后立即触发它。

如果您想立即启动fancybox，请遵循文档并像这样使用它：

$.fancybox.open({
  src  : '.popup',
  type : 'inline',
  transitionEffect : 'zoom-in-out'
});

它应该可以正常工作。

带外部链接的Fancybox嵌入式图像

1 个答案: