parent.jQuery.fancybox.close(); from within Fancybox only closes Fancybox once

Question

I'm trying to close a Fancybox instance from a link within the Fancybox content. I'm using parent.jQuery.fancybox.close(); as recommended in this question. It works the first time, but thereafter not. Can anyone suggest a fix?

I'm hiding my content div in the page with this:

#content {
    display: none;
}

And here's the link launching the Fancybox, with that content div, which includes the link to close the 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>

And this is my JS. I've tried adding the event hander to the close link on opening the Fancybox, but it didn't help.

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

Thanks guys!

Answer 1

parent.jQuery.fancybox.close(); should be called from within an iframe opened in fancybox. In your case you are opening inline content so the prefix parent is not needed. Additionally you must provide the correct structure to your inline content and call the closing function from there.

So your inline content should look like

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

because of the above you don't need this css

#content {
    display: none;
}

since #content is already inside a hidden div.

then your closing function can be separated from the fancybox script... also notice the changes on the fancybox script below:

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

this is for Fancybox v1.3.x, the version you seem to be using. Also you should be using jQuery v1.7.x if you want the .on() method to work.