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