Question

如何使用FancyBox3创建后续事件？我在fancybox的第二个版本中使用了afterClose事件，但是我试图升级到fancybox3并且指示说要将选项放在＆＃34; data-options＆＃34;属性。

这是我试过的：

  <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事件

2 个答案: