如何在页面加载时使用Featherlight打开DOM元素？

Question

我在使用 Featherlight 弹窗时遇到了问题，无法在页面加载时显示内容。

参考链接：https://github.com/noelboss/featherlight/#usage 代码示例：https://jsfiddle.net/axxdy4we/ 通过链接打开 Featherlight 弹窗

<a href="#" class="my-content" data-featherlight="<p>My Content</p>">Open some DOM in lightbox</a>

这个链接会加载来自 data-featherlight 属性的 HTML 内容。

点击链接将会加载 "My Content"。

在页面加载时。

$.featherlight($('.my-content'), {});

这仅加载在 <a> 标签之间的内容，即 "在 lightbox 中打开一些 DOM"。

如何在页面加载时从 data-featherlight 属性中调用 "My Content"？

我需要将 HTML 放在 data-featherlight 中，而不是放在 div 外面。

我认为可能是这样的：

$('.my-content').featherlight();

$('.my-content').featherlight.current();

- Matt McManis

Answer 1

在内容上调用.featherlight()以确保模态窗口已配置，然后在页面加载后使用jQuery的.click()功能：

$('.my-content').featherlight().click()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://noelboss.github.io/featherlight/release/featherlight.min.js"></script>
<a href="#" class="my-content" data-featherlight="<p>My Content</p>">
  Open some DOM in lightbox
</a>

- gyre