在 Fancybox3 中使用 afterClose 事件

Question

如何使用 FancyBox3 创建收盘后事件？我在 fancybox 的第二个版本中使用 afterClose 事件，但我正在尝试升级到 fancybox3 并且说明说将选项放在“data-options”属性中。

这是我尝试过的：

  <a data-fancybox data-type="iframe" data-src="http://www.example.com" href="javascript:;"
     data-options='{
                   
                afterClose  : function() {
                    location.href = "http://www.google.com";
                }
                   }'>

还有：

<script>
        $("[data-fancybox]").fancybox({
    afterClose  : function() {
                    location.href = "http://www.google.com";
                }

        });
</script>

Answer 1

HTML 属性中的代码不会像您预期的那样工作，因为它只是一个简单的文本而不是真正的 js 函数，因此要使其工作，您应该将代码放入 js 文件中, 你错过了一些东西，所以请试试这个

$.fancybox.open({
    src  : '#hidden-content',
    type : 'inline',
    opts : {
        afterShow : function( instance, current ) {
            console.info( 'done!' );
        }
    }
});

如文档所述：https://fancyapps.com/fancybox/3/docs/#api

Answer 2

您的第二个代码段应该有效，请参阅此演示 - https://codepen.io/anon/pen/OQmBZy?editors=1010

HTML

  <a data-fancybox="test" data-type="iframe" data-src="https://codepen.io/about/" href="javascript:;">
    External page
  </a>

JS

$('[data-fancybox="test"]').fancybox({
  afterClose  : function() {
    alert('Done!');
    location.href = "https://www.google.com";
  }
});

我已经输入 alert('Done!') 以查看回调执行。 Google 将阻止将自身加载到 iframe 中，因此您只会看到空白页面。

在 Fancybox3 中使用 afterClose 事件

Using afterClose event with Fancybox3

javascript

jquery

fancybox

fancybox-2

fancybox-3