当羽毛灯箱打开和关闭时运行代码，如回调

Question

打开featherlight灯箱时有没有办法运行代码？当它关闭时再次？有没有钩子之类的，可以在打开灯箱后运行代码？我在 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

在您的羽化配置中，您可以设置 beforeOpen、afterOpen、beforeClose 和 afterClose 事件钩子，当这些事件发生时，它们将为您调用一个函数：

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

如果您使用 JS 绑定框，您可以在传递给它的配置中指定这些：

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

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

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