Question

我在这里看到了有关如何使用Fancybox的afterClose回调的各种示例。我已尝试过此代码的几种变体，并且在使用“X”关闭影子框后没有任何变量触发警报。

<script>
$(document).ready(function () {
$(".receipt").fancybox({
        type : 'ajax',
        href : 'https://www.docuvital.com/index.cfm/receipt/', 
        openEffect  : 'elastic',
        nextEffect  : 'elastic',
        closeEffect : 'elastic',
        prevEffect  : 'elastic',
        openSpeed   : 1000,
        nextSpeed   : 1000,
        closeSpeed  : 1500,
        prevSpeed   : 1000,
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : true,
        closeClick  : false,
        autoCenter  : true,
        scrolling   : 'no',
        helpers : {  
            overlay : { 
                closeClick: false,
                css : { 'background' : 'rgba(150,144,146,.60)'},
                      }
                  },
    afterClose: function(){
        alert("done");
    }
}).trigger("click"); // triggers fancybox on page load so no need $.fancybox.open
}); // ready
</script>

Answer 1

所有fancybox初始化都应该在.ready()方法内，并且您需要为同一个选择器使用一个。

编辑：

要简化代码，您可以不需要$.fancybox.open()，但会在页面加载时触发click：

$(document).ready(function () {
    // $(".receipt").fancybox(); // this is redundant
    $(".receipt").fancybox({
        // ALL my API options here
        // then my callback
        afterClose: function(){
            // do something here
            alert("done");
        }
    }).trigger("click"); // triggers fancybox on page load so no need $.fancybox.open
}); // ready

参见 JSFIDDLE

编辑＃2 ：在您的代码中使用$.fancybox.open()方法（也可以使用!!!）

$(document).ready(function () {
    // $(".receipt").fancybox(); // this is redundant because you don't have a link
    $.fancybox.open({
        type: 'iframe', // ajax but switched to iframe for testing
        href: 'http://jsfiddle.net',
        openEffect: 'elastic',
        nextEffect: 'elastic',
        closeEffect: 'elastic',
        prevEffect: 'elastic',
        openSpeed: 1000,
        nextSpeed: 1000,
        closeSpeed: 1500,
        prevSpeed: 1000,
        maxWidth: 800,
        maxHeight: 600,
        fitToView: false,
        width: '70%',
        height: '70%',
        autoSize: true,
        closeClick: false,
        autoCenter: true,
        scrolling: 'no',
        helpers: {
            overlay: {
                closeClick: false,
                css: {
                    'background': 'rgba(150,144,146,.60)'
                }
            }
        },
        afterClose: function () {
            alert("done");
        }
    });
}); // ready

参见 JSFIDDLE

fancyBox / JQuery回调不起作用

1 个答案: