Jquery 使用fancyBox显示后，可见内联div消失

我在这里发布了一个问题和解决方案，以帮助任何与我经历过同样问题的人

我的页面上有一个

，我想让用户通过单击图标“缩放”到该页面。

未隐藏

我使用fancyBox（）将

显示为一种模式窗口。我之所以使用fancyBox而不是其他lightbox类型的插件，是因为它不会复制

的内容，而是移动它，所以所有表单元素等都会继续工作。 问题是关闭fancyBox窗口后，

隐藏在主页面上

解决方案：

我使用了fancyBox 2.1.2

我使用JFKDIAZ在github（）上发布的解决方案来确保在关闭fancyBox窗口后将div返回到其父级

然后，我使用jqueryshow功能再次内联显示div

下面是我初始化花式方框的代码。请注意，加载前的

和关闭后的
功能可识别父级
，并将
返回其父级（感谢JFKDIAZ）。注意添加了
$（inlineTarget）.show（）
再次显示
，使其不会消失。剩下的是fancyBox的标准初始化

        $(document).ready(function() {
        $(".various").fancybox({
            beforeLoad: function() {
                inlineTarget = this.href;
                parentNodename = $(inlineTarget).parent().get(0).tagName.toLowerCase();
                $(inlineTarget).parent(parentNodename).addClass("returnTo");
            },
            afterClose: function() {
                $(inlineTarget).appendTo(".returnTo");
                $(".returnTo").removeClass("returnTo");
                $(inlineTarget).show();
            },
            maxWidth: 880,
            maxHeight: 600,
            fitToView: false,
            width: '70%',
            height: '70%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });

下面是我的
代码以及在fancyBox中显示
的链接。请注意，父级
必须具有
id
，以便代码能够识别它。class
variable
是我用来识别哪个

内容显示在fancyBox中，完成后返回此处。

这对我很有效。所有表单元素都被移动到fancyBox并返回到页面上的原始位置

更新（从评论中将链接移动到小提琴）-有关演示，请参阅：

我希望这能帮助有同样问题的人。
我为fancybox v2.0.6及以下版本编写了解决方案（我也是JFKDIAZ；）。新版本v2.1.x+已经解决了这个问题（设置了一个临时占位符以将内容返回到其原始位置），但是v2.1.x+的新问题（到目前为止的v2.1.2版本）是内容确实正确返回但隐藏了

新的解决方法（对于2.1.x+版本）只是让它在关闭后可见

var tarGet; // initialize var at top of script

回调

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

看


编辑（2014年3月27日）：要避免@Henrik Erlandson在中指出的全局变量，您只需执行以下操作：

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

参见forked
避免全局变量、处理多个图像（图库、滑块）且不会弄乱图像中心的较短解决方案是在图像上放置一个类，并在document ready中修改初始化，如下所示：

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

display:block只是上述与FlexSlider 2一起使用的场景的一个示例。当然，你可以添加任何你想要的CSS补丁

但在Fancybox中进行更正是更合适的方式。

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

内容显示在fancyBox中，完成后返回此处。
发布一些查询和html，你可以使用jsfiddle.net，因为我发布了解决方案作为问题的答案，但我不被允许，因为我作为第一次发布者的声誉太低，无法回答我自己的问题。我现在已将我的解决方案包括在我原来的问题中。谢谢我已经按照Dejan的建议使用JSFIDLE设置了这个解决方案，这种效果通常是通过单击问题下方的“回答您自己的问题”按钮来实现的。请重新格式化？谢谢@Code Monkey。JFK在下面发布了一个更好的解决方案，因此我将按原样离开，并将JFK的解决方案作为解决方案。谢谢@JFK。我不知道fancyBox的最新版本已经解决了将内容返回到其原始父级的问题。感谢您提供的原始解决方案，以及在fancyBox窗口关闭后显示的简单添加。fancyBox的目标和触发器之间存在细微差异。OP中的问题仅适用于
inline
内容。在这种情况下，目标元素的类更合适。
<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>