Fancybox 3 - 将按钮添加到自定义 HTML 弹出窗口

Posted 2023-05-09

【中文标题】Fancybox 3 - 将按钮添加到自定义 HTML 弹出窗口

【英文标题】：Fancybox 3 - Add buttons to custom HTML popup

【发布时间】：2018-07-31 14:37:55

【问题描述】：

我正在使用fancybox 3，类似这样的

<a href="#popup" data-fancybox="popup" data-buttons="['slideShow','fullScreen','thumbs','share']">Click me!</a>

<div id="popup">MY POPUP with custom html</div>

但是，没有添加任何按钮，并且我收到一个 jQuery 错误“无法使用 'in' 运算符在 ['slideShow','fullScreen','thumbs','share'] 中搜索 'length'”。我尝试通过数据选项传递选项对象，但效果不佳。我正在尝试做的正确语法是什么？我想添加一些标准按钮，例如缩略图预览、共享按钮（如果可以使用自定义 HTML）等

【参考方案1】：

使用正确的 JSON 语法，例如，替换 ` 和 ":

<a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="group" data-buttons='["slideShow","fullScreen","thumbs","share"]'>
  <img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
</a>

演示 - https://codepen.io/anon/pen/oEaoVr?editors=1000

【讨论】：

实际上，我似乎无法让它工作。它在您的演示中有效，因为您链接到图像，但是当我链接到同一页面上的自定义 HTML 时它不起作用。

那么也许试试这个 - codepen.io/anon/pen/WMLXzb?editors=1000（这似乎不适用于当前版本；你必须等待 v3.3 或者你可以从 codepen 中获取源代码）

不错！知道那个版本什么时候出吗？我宁愿等到正式发布。