parent.jQuery.fancybox.close (); изнутри Fancybox закрывает Fancybox только один раз

Question

Я пытаюсь закрыть экземпляр Fancybox по ссылке в содержимом Fancybox.Я использую parent.jQuery.fancybox.close();, как рекомендовано в этом вопросе .Это работает в первый раз, но после этого нет.Кто-нибудь может предложить исправить?

Я скрываю свой div с содержимым на странице следующим образом:

#content {
    display: none;
}

И вот ссылка, запускающая Fancybox, с этим div содержимого, которая включает ссылку для закрытия Fancybox.

<a href="#" id="launch">Launch</a>

<div id="content">
    <p>Nunc porttitor pellentesque magna a pulvinar. Vestibulum id diam lectus. Praesent vel dictum est.</p>

    <a href="#" id="close">Close</a>
</div>

А это мой JS.Я пытался добавить обработчик событий к закрытой ссылке при открытии Fancybox, но это не помогло.

$(document).ready(function(){
    $('#launch').fancybox({
        'width': 300,
        'content': $('#content'),
        'onClosed':function () {
            $("#content").hide();
        },
        'onStart':function () {
            $("#content").show();
            $('#close').on('click', function(){
                //console.log($(this).parent);
                parent.jQuery.fancybox.close();
            })
        },
        'onCleanup':function () {
            $("#content").unwrap();
        }
    });
})

Спасибо, ребята!

Answer 1

parent.jQuery.fancybox.close(); следует вызывать из iframe, открытого в fancybox. В вашем случае вы открываете inline контент, поэтому префикс parent не нужен. Кроме того, вы должны предоставить правильную структуру вашего встроенного содержимого и вызвать оттуда функцию закрытия.

Так что ваш встроенный контент должен выглядеть так:

<div style="display: none;">
 <div id="content">
   <p>Nunc porttitor pellentesque magna a pulvinar. Vestibulum id diam lectus. Praesent vel dictum est.</p>
   <a href="javascript:;" id="close">Close</a>
 </div>
</div>

из-за вышесказанного вам не нужен этот css

#content {
    display: none;
}

, поскольку #content уже находится внутри скрытого div.

тогда ваша функция закрытия может быть отделена от скрипта fancybox ... также обратите внимание на изменения в скрипте fancybox ниже:

$(document).ready(function(){
 $('#close').on('click', function(){
  //console.log($(this).parent);
  $.fancybox.close();
 }); //on
/*
// you could also do 
$('#close').click(function(){
 $.fancybox.close();
});
*/
 $('#launch').click(function(){
  $.fancybox({
   'width': 300,
   'href': '#content',
   'onCleanup':function () {
    $("#content").unwrap();
   }
  });//fancybox
 }); // click
}); //ready

это для Fancybox v1.3.x, версия, которую вы используете. Также вы должны использовать jQuery v1.7.x, если хотите, чтобы метод .on() работал.

Answer 2

    try{
        parent.jQuery.fancybox.close();
    }catch(err){
        parent.$('#fancybox-overlay').hide();
        parent.$('#fancybox-wrap').hide();
    }

!!! Не поддерживается onClose !!!