-1

我已经在这里看到了如何将 afterClose 回调与 Fancybox 一起使用的各种示例。我已经尝试了此代码的几种变体，但在使用“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>
4

1 回答 1

0

你所有的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

于 2013-09-01T23:14:17.570 回答