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

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>以及显示 <div> 的链接在下面的 fancyBox 中。请注意，父项 <div>必须有 id以便代码可以识别它。类(class)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 并返回到其在页面上的原始位置。

更新(将链接从评论移至 fiddle )- 有关演示，请参阅: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();
}

参见 fork JSFIDDLE