javascript - 在 featherlight 灯箱打开和关闭时运行代码，如回调

Question

打开 featherlight 灯箱时，有没有办法运行代码？什么时候关闭？是否有 Hook 或其他东西，以便我可以在打开灯箱后运行代码？我在 github 页面上找不到示例 ( https://github.com/noelboss/featherlight )

HBlackorby 回答后的附录:

我的设置是这样的:HTML:

<ul data-featherlight 
    data-featherlight-type="ajax" 
    data-featherlight-filter="a.box" 
    data-featherlight-before-open="MYFUNCTION">

    <li><a class="box" href="content1">Link</a></li>
    <li><a class="box" href="content2">Link2</a></li>
    <li><a class="box" href="content3">Link3</a></li>

</ul>

在我单独的 JavaScript 文件中，我有以下代码行:

MYFUNCTION = function(){
    console.log('Test')
}

不幸的是，这个函数在打开之前没有被调用。还尝试用“之后”而不是“之前”。我也没有得到错误。当我在 HTML 中调用 featherlight 时，这些代码行必须在哪里？

Answer 1

在您的 featherlight 配置中，您可以设置 beforeOpen、afterOpen、beforeClose 和 afterClose 事件 Hook ，它们会在这些事件发生时为您调用一个函数:

https://github.com/noelboss/featherlight/#installation

如果你用 JS 绑定(bind)盒子，你可以在传递给它的配置中指定这些:

let myConfig = {
beforeOpen: yourFunctionName1,
beforeContent: yourFunctionName2,
beforeClose: yourFunctionName3,
afterOpen: yourFunctionName4
}
$('.myElement').featherlight($content, myConfig);

或者，您也可以使用标签的 HTML 数据属性指定这些事件。例如:

<img src="" id="" data-featherlight-before-open="yourFunction1()" />