parent.jQuery.fancybox.close(); dall'interno di Fancybox si chiude solo Fancybox una volta

Question

Sto provando a chiudere un'istanza di Fancybox da un collegamento all'interno del contenuto di Fancybox. Sto usando parent.jQuery.fancybox.close(); come raccomandato in this question. Funziona la prima volta, ma in seguito no. Qualcuno può suggerire una correzione?

Mi sto nascondendo il mio contenuto div nella pagina con questo:

#content { 
    display: none; 
} 

Ed ecco il link lancio del Fancybox, con quel div contenuti, che include il link per chiudere 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> 

E questo è il mio JS. Ho provato ad aggiungere l'evento hander al link di chiusura all'apertura di Fancybox, ma non è stato d'aiuto.

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

Grazie ragazzi!

Answer 1

parent.jQuery.fancybox.close(); deve essere chiamato dall'interno di iframe aperto in fancybox. Nel tuo caso stai aprendo il contenuto inline, quindi il prefisso parent non è necessario. Inoltre, è necessario fornire la struttura corretta per i contenuti in linea e chiamare la funzione di chiusura da lì.

Così il vostro contenuto in riga dovrebbe essere simile

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

a causa della sopra di voi non hanno bisogno di questo css

#content { 
    display: none; 
} 

dal #content è già all'interno di una nascosta div.

quindi la funzione di chiusura può essere separato dallo script fancybox ... notare anche le variazioni sullo script fancybox di seguito:

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

questo è per Fancybox La versione 1.3.x, la versione che sembrano stare usando Inoltre dovresti usare jQuery v1.7.x se vuoi che il metodo .on() funzioni.

Answer 2

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

!!! Non supportato su Chiudi !!!