Fancybox v3.1.28自动弹窗内链接失效问题求助

嘿，这个问题我之前也碰到过！Fancybox v3默认会拦截弹窗里的所有链接，把它们当成要加载的新Fancybox内容，而不是让浏览器直接跳转，这就是你那个“View more”链接失效的原因。给你两个简单的解决方案：

方案一：直接给链接加属性（最快捷） #

只要在你的链接标签里加上data-fancybox="false"，明确告诉Fancybox不要处理这个链接的点击事件，它就会像普通链接一样正常跳转了。修改后的HTML代码如下：

<div class="popup"> 
  <div class="container"> 
    <h4>Description text...</h4> 
    <a class="btn btn-green" href="/the_url_of_the_page" data-fancybox="false">View more</a> 
  </div> 
</div>

方案二：通过JS配置全局处理（适合多个链接的场景） #

如果弹窗里有很多链接，不想一个个加属性，可以在初始化Fancybox的时候添加一个click回调，手动处理链接的跳转逻辑：

$(document).ready(function() {
  $('.popup').fancybox({
    transitionEffect : "zoom-in-out",
    click: function(event, current) {
      // 检测点击的是普通链接，且不是Fancybox自带的控制按钮
      const target = $(event.target);
      if (target.is('a') && !target.closest('.fancybox-controls').length) {
        // 跳转到链接指定的地址
        window.location.href = target.attr('href');
        // 阻止Fancybox的默认拦截行为
        return false;
      }
    }
  }).trigger('click');
});

两种方法都能解决你的问题，个人更推荐方案一，简单直接，代码改动最小。如果是外部链接（比如带http/https的），同样适用哦！

内容的提问来源于stack exchange，提问作者user2519032