Fancybox v2在第二次点击时失败

Question

I have a site that uses the ajax option of Fancybox v2 to display certain bits of information such as the help, contact information, etc. I have noticed a problem with it, however, where it works fine on the first click but generally misbehaves on subsequent clicks - the actual pop-up window may appear briefly and then disappear, or it may never appear at all, and the overlay may load two or three times so that it takes several clicks to clear it.

It doesn't matter whether you click the same link or another link that also uses Fancybox. The Firebug console reports no errors. If you refresh the page you get another single reliable click, and then subsequent clicks exhibit the odd behaviour again.

I have created a stripped-down version of one of our pages (removing all other scripts) to see if there was something causing a conflict, but this doesn't seem to be the case. You can have a look at it here:

http://frontandback.com.au/fancytest/

The three links in the top-right of the site have the Fancybox applied to them. Example:

<ul>
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li>
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Help</a></li>
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">FAQs</a></li>
</ul>

If anyone has any suggestions as to what is causing this odd problem, it would be greatly appreciated.

Cheers.

Answer 1

From this post I created a revised version where you can load partial content from a file via ajax.

This new revision uses a (HTML5) data- attribute to pass the hash of the URL so instead of doing this

<li><a href="index.html" data-fancybox-href="index.html #contact" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li>

we'll do this

<li><a href="index.html" data-segment="#contact" target="_blank" class="fancybox">Contact us</a></li>

... notice that we are not using any special fancybox class fancybox.ajax nor fancybox.iframe as suggested in the comments section.

Then the basic script

$(".fancybox").on("click", function() {
    targetContent = $("<div />").load(this.href +" "+ $(this).data("segment")); 
    $.fancybox(targetContent, {
        fitToView: false,
        autoSize : false,
        width: 420, // or whatever
        height: 280
    }); // fancybox
    return false; // prevent default
}); // on

You may set dimensions to each <div> from the remote file via style="" attribute, then set autoSize : true and remove the width and height options to get a dynamic size.

Of course, the revised DEMO