alert при закрытии модального окна fancybox

101

05 июля 2021, 03:30

Доброго времени суток.
Есть HTML в body только это

<a class="youtube" data-fancybox href="https://www.youtube.com/watch?v=7iZPrUgM_CI&autoplay=1">
        YouTube video
    </a>

мне нужно, чтобы при закрытии данного модального окна, выводилось предупреждение, а только потом закрывалось, но не могу найти этот евент ни где, так как закрывается окно не по крестику, а вообще по клику в любом месте вне видео.
Прошу помощи с реализацией кода видимо в script.js.

P/S:
кстати, если кто-то знает, как сделать так, чтобы модальное окно вообще не закрывалось кроме как на крестик - буду тоже благодарен, варианты типа :

jQuery(".youtube").fancybox({
    helpers     : {
        overlay : {
            speedIn  : 0,
            speedOut : 300,
            opacity  : 0.8,
            css      : {
                cursor : 'default'
            },
            closeClick: false
        }
    },
});
$(document).ready(function() {
    $(".youtube").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });

не работают.

Answer 1

Как-то не приходилось использовать данный плагин, и возможно у вас какая-то старая версия, но в документации, кажется, все предельно ясно написано.

нужно, чтобы при закрытии данного модального окна, выводилось предупреждение, а только потом закрывалось,

beforeClose: $.noop, // Before the instance attempts to close. Return `false` to cancel the close.

как сделать так, чтобы модальное окно вообще не закрывалось кроме как на крестик

// Clicked on the slide  
clickSlide: "close",
// Clicked on the background (backdrop) element;
// if you have not changed the layout, then most likely you need to use `clickSlide` option
clickOutside: "close",

в итоге имеем:

$(function() { 
    $(".youtube").fancybox({ 
      clickOutside: false, 
      clickSlide: false, 
      beforeClose: function(){ 
         alert('hey!'); 
      } 
    }); 
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> 
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> 
 
<a class="youtube" data-fancybox href="https://www.youtube.com/watch?v=7iZPrUgM_CI&autoplay=1"> 
        YouTube video 
    </a>