Visible inline div disappears after being displayed with fancyBox

Question

I am posting a problem and solution here to help anyone who has experienced the same problem as me.

I have a

on my page which I wanted to al

相关标签:

Answer 1

I wrote that solution for fancybox v2.0.6 and below (I am JFKDIAZ too ;). That issue has been fixed with the new release v2.1.x + (a temporary placeholder has been set to return the content to its original place), however the NEW issue with v2.1.x + (v2.1.2 to date) is that the content is indeed properly returned but hidden.

The new workaround (for version 2.1.x +) would be just to make it visible afterClose like

var tarGet; // initialize var at top of script

the callbacks

beforeShow: function(){
 tarGet= this.href;
},
afterClose: function(){
 $(tarGet).show();
}

see forked fiddle

---

EDIT (March 27, 2014) : To avoid global variables as pointed out by @Henrik-Erlandsson in his answer, you could simply do :

afterClose: function(){
  $(this.href).show();
}

See forked JSFIDDLE

Answer 2

<a href="#application_form" class="various">Zoom</a>
<div id="application_parent" style="display:none">
    <div id="application_form">
        Contents to display in fancyBox and return back here when complete.
    </div>
</div>

Answer 3

A shorter solution that avoids global variables, works with multiple images (galleries, sliders), and doesn't mess up image centering is to put a class on the images and modify the initialization in document ready like this:

$(".fancybox").fancybox({
    afterClose: function(){
     $(".fancybox").css("display","block");
    }
});

display:block is just an example for the above scenario used with FlexSlider 2. You could add any CSS fixes you want, of course.

But a correction in Fancybox itself is the more proper way.