fancyBox/JQuery Callback Not Working

Question

Я видел различные примеры здесь, как использовать обратный вызов 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> 

Answer 1

вся ваше FancyBox инициализация должна быть внутри метода .ready() И вам нужна один один для одного селектора.

EDIT:

Для упрощения кода, вы можете не нужно $.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

EDIT # 2: us ING $.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