parent.jQuery.fancybox.close(); dentro de Fancybox solo cierra Fancybox una vez

Question

Estoy intentando cerrar una instancia de Fancybox desde un enlace dentro del contenido de Fancybox. Estoy usando parent.jQuery.fancybox.close(); como se recomienda en this question. Funciona la primera vez, pero después no. ¿Puede alguien sugerir una solución?

estoy escondiendo mi div contenido de la página con esto:

#content { 
    display: none; 
} 

Y aquí está el enlace lanzamiento de la FancyBox, con ese div de contenido, que incluye el enlace para cerrar la 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> 

Y esta es mi JS. Intenté agregar el controlador de eventos al enlace cercano al abrir Fancybox, pero no ayudó.

$(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(); 
     } 
    }); 
}) 

Gracias chicos!

Answer 1

parent.jQuery.fancybox.close(); debe llamarse desde un iframe abierto en fancybox. En su caso, está abriendo el contenido inline, por lo que no es necesario el prefijo parent. Además, debe proporcionar la estructura correcta a su contenido en línea y llamar a la función de cierre desde allí.

lo que su contenido en línea debe ser similar

<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> 

porque de lo anterior que no necesitan esta css

#content { 
    display: none; 
} 

desde #content ya está escondido dentro de un div.

entonces su función de cierre se puede separar de la secuencia de comandos FancyBox ... También se dio cuenta de los cambios en la secuencia de comandos FancyBox a continuación:

$(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 

esto es para FancyBox v1.3.x, la versión que parecen estar usando. También debe usar jQuery v1.7.x si desea que el método .on() funcione.

Answer 2

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

!!! Not Support onClose !!!