javascript - Fancybox 弹出窗口中的链接

Question

页面加载时，我会自动触发 Fancybox 弹出窗口。

该弹出窗口内有一个 HTML 内容，其中包含指向其他页面的链接。

该链接在使用 Fancybox 加载时不起作用。

这是我的代码:

<div class="popup">
  <div class="container">
    <h4>Description text...</h4>
    <a class="btn btn-green" href="/the_url_of_the_page">View more</a> //this link is not working
  </div>
</div>

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

如何设置该链接正常工作？

我使用的是 Fancybox v3.1.28

Answer 1

首先，链接、按钮等在 fancybox 中工作得很好。

您的示例中的问题是由于您使用 .popup 选择器来初始化 fancybox 的事实引起的，但该选择器与包含您的链接的元素相匹配。因此，您的代码可以翻译为“当用户单击具有类“.popup”的元素时启动 fancybox”。但是，您的链接位于类名为“.popup”的元素内部，因此它启动 fancybox。

最后，你的代码没有任何意义。如果您希望立即启动 fancybox，请使用 $.fancybox.open() 方法，请参阅 https://fancyapps.com/fancybox/3/docs/#api sample