6

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

我的页面上有一个<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 内联。

我的初始化花式框的代码如下。注意beforeLoadandafterClose函数来识别父级<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'
        });
    });

我的代码和在 fancyBox 中<div>显示的链接如下。<div>请注意，父级<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/

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

4

3 回答 3

4

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

于 2012-10-21T22:56:04.093 回答
3

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

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

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

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

于 2014-03-27T08:15:56.070 回答
1 
<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>
于 2017-06-12T07:53:45.447 回答