Question

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

我的页面上有<div>，我希望用户可以通过点击图标来“缩放”。 <div>未隐藏。

我使用fancyBox（fancyBox home page）将<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>代码和fancyBox中显示<div>的链接如下。请注意，父<div>必须有id，以便代码可以识别它。类various是我用来标识必须将fancyBox应用于哪个<a>元素的标记。

    <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();
}

请参阅forked fiddle

编辑（2014年3月27日）：为了避免@ Henrik-Erlandsson在his answer中指出的全局变量，您可以这样做：

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

请参阅分叉 JSFIDDLE

Answer 2

避免全局变量的较短解决方案，适用于多个图像（画廊，滑块），并且不会弄乱图像居中，就是在图像上放置一个类并修改文档中的初始化，如下所示： / p>

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

display：block只是上面使用FlexSlider 2的场景的一个例子。当然，你可以添加你想要的任何CSS修复。

但Fancybox本身的更正是更合适的方式。

Answer 3

<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显示后，可见的内联div消失

3 个答案: