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

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

我的页面上有一个

，我希望用户可以通过点击图标来“缩放”。

未隐藏。

我使用fancyBox（ fancyBox主页 ）将

显示为一种模态窗口。 我使用fancyBox而不是其他灯箱类型插件的原因是它不复制

的内容，而是移动它，所以所有表单元素等继续工作。 问题是关闭fancyBox窗口后，

隐藏在主页面上。

解决方案：

我使用了fancyBox 2.1.2。

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

然后我使用jquery showfunction再次显示div内联。

我初始化花式框的代码如下。 注意beforeLoad和afterClose函数来标识父

并将

返回给它的父级（感谢JFKDIAZ）。 注意添加$(inlineTarget).show(); 再次显示

以使其不会消失。 其余部分是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中显示

的链接如下所示。 请注意，父

必须具有id以便代码可以识别它。 various类是我用来标识我必须将fancyBox应用于哪个元素的标签。

  Zoom 
 
 Contents to display in fancyBox and return back here when complete. 
  

这对我很有用。 所有表单元素都移动到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(); } 

请参阅forked JSFIDDLE

Answer 2

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

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

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

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

Answer 3

 Zoom 
 
 Contents to display in fancyBox and return back here when complete.