与fancyBox显示后，可见的内联div消失

Question

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

<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和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并返回其在页面上的原始位置。

更新（从注释移动到小提琴的链接）-有关演示，请参见：http : //jsfiddle.net/z8e9q/3/

我希望这对遇到同样问题的人有所帮助。

Answer 1

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

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

var tarGet; // initialize var at top of script

回调

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

参见叉形小提琴

编辑（2014 年 3 月 27 日）：为了避免 @Henrik-Erlandsson 在他的回答中指出的全局变量，您可以简单地执行以下操作：

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

请参阅分叉的JSFIDDLE