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

我在这里发布问题和解决方案，以帮助与我遇到相同问题的任何人。

我有一个<div>在我的页面上，我想允许用户通过单击图标来“缩放”。这<div>没有隐藏。

我用了 fancyBox (fancybox主页）来显示<div>作为一种模式窗口。我使用 fancyBox 而不是其他灯箱类型插件的原因是它不会重复<div>，但会移动它，因此所有表单元素等都会继续工作。 问题是关闭 fancyBox 窗口后，<div>隐藏在主页上。

解决方案：

我用的是fancyBox 2.1.2。

我使用了 JFKDIAZ 在 github 上发布的解决方案（https://github.com/fancyapps/fancyBox/issues/103）以确保关闭 fancyBox 窗口后 div 返回到其父级。

然后我使用 jquery show 功能再次内联显示 div。

我初始化花式框的代码如下。请注意beforeLoad and afterClose识别父级的函数<div>并返回<div>返回到其父级（感谢 JFKDIAZ）。注意添加$(inlineTarget).show();显示<div>再次这样它就不会消失。其余部分是 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'
        });
    });

我的代码<div>以及显示的链接<div>在下面的 fancyBox 中。请注意，父级<div>必须有一个id以便代码可以识别它。班上various是我用来识别哪个的标签<a>我必须应用 fancyBox 的元素。

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

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

UPDATE（从评论中将链接移至小提琴）-有关演示，请参阅：http://jsfiddle.net/z8e9q/3/

我希望这可以帮助有同样问题的人。

我为 fancybox v2.0.6 及以下版本编写了该解决方案（我也是 JFKDIAZ ；）。新版本 v2.1.x + 已解决该问题（已设置临时占位符以将内容返回到其原始位置），但是NEWv2.1.x +（迄今为止的 v2.1.2）的问题是内容确实正确返回，但是hidden.

新的解决方法（对于版本 2.1.x +）只是使其可见afterClose like

var tarGet; // initialize var at top of script

回调

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

see 叉形小提琴

EDIT（2014 年 3 月 27 日）：为了避免全局变量，正如 @Henrik-Erlandsson 中指出的那样他的回答，你可以简单地这样做：

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

参见分叉JSFIDDLE