Fancybox 4实现页面加载自动弹出banner浮层的代码错误排查

原有代码错误点 #

• 错误指定了Fancybox打开类型：你的src是DOM元素ID选择器，对应类型应该是inline，而非image，image类型仅用于直接传入图片URL的场景
• HTML结构存在语法错误：a标签缺失标签名，拼写错误htts应为https
• 需确认依赖引入顺序正确：需按顺序引入jQuery、Fancybox 4 核心脚本与样式、js-cookie 库

修复后完整代码 #

JavaScript 部分 #

(function ($) {
  if(!Cookies.get('overlay2533')) {
    $(document).ready(function () {
      Fancybox.show([
        {
          src : "#fancybox-overlay",
          type : "inline",
          // 可选自定义配置，可根据需求增删
          mainClass: "fancybox-banner",
          closeButton: true
        }
      ], {
        // 全局交互配置
        closeOnClick: true,
        dragToClose: false
      });
    });
    var date = new Date();
    date.setHours(24,0,0,0);
    Cookies.set("overlay2533", "1", { expires: date });
  }
})(jQuery);

HTML 部分 #

<div id="fancybox-overlay" style="display:none;">
  <a href="https://你的跳转地址" target="_blank">
    <img src="https://你的图片地址" alt="banner宣传图" />
  </a>
</div>

额外注意事项 #

• Fancybox 4 原生支持不依赖jQuery调用，如果你后续想去掉jQuery依赖，可直接把代码放在DOMContentLoaded事件回调中即可
• Cookie过期逻辑已保留，用户首次访问后24小时内不会再次弹出该浮层
• 可根据需要调整Fancybox的配置项，比如设置弹窗最大宽度、动画效果、是否禁止背景滚动等

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