Fancybox 2 beforeLoad 和 afterClose 在活动时不会触发隐藏/显示 div

Posted 2023-05-09

【中文标题】Fancybox 2 beforeLoad 和 afterClose 在活动时不会触发隐藏/显示 div

【英文标题】：Fancybox 2 beforeLoad and afterClose not firing to hide/show a div when active

【发布时间】：2013-12-16 18:42:52

【问题描述】：

我正在尝试在 Fancybox 2 中使用 beforeLoad 和 afterClose。

我需要在 iFrame 中隐藏一个 Flash 动画 - 它位于 #elanceiframe div 内 - 而 Fancybox 打开并显示投资组合，然后在 Fancybox 关闭时再次显示 div。

这是因为 iFrame 不尊重 IE 中的 z-index，并且不会被 Fancybox “淡出”，而是在 Fancybox 图像旁边的前景中。所以我想在 Fancybox 运行时 display:none #elanceiframe div。

这是 fancybox 初始化函数，它可以正常运行投资组合，但 beforeLoad 和 afterClose 不会触发。

$(document).ready(function() 
   $("a[data-fancybox-group=portfolio]").fancybox(
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'overlayColor' : '#000',
    'overlayOpacity' : 0.7,
    'beforeLoad' : function()
       $("#elanceiframe").css('display', 'none');
     ,
    'afterClose': function() 
       $("#elanceiframe").css('display','block');
      
   );
);

我是否正确使用了beforeLoad 和afterclose？

我是否需要在 #elanceiframe div 上使用 CSS，例如 display:none？

编辑 12/04/13

上面的例子运行良好；我在函数中调用了错误的div :(

【问题讨论】：

它们看起来不错。您甚至可以操纵iframe 的src 属性的值，这样您的文档就不会像display: none jsfiddle.net/Nsxcn 那样跳转，顺便说一句，您的一些API 选项适用于fancybox v1.3.x并且不适用于 v2.x。检查文档以获取正确的选项fancyapps.com/fancybox/#docs

啊，你说得对；我搞砸了，并按名称调用了错误的 div。但是您保持框架容器大小的想法很好；它在侧边栏中，因此不太重要。但是您应该将其添加为答案，这样我就可以为您提供新的 API 选项建议。

已发布答案。谢谢

【参考方案1】：

代码中的选项

beforeLoad: function () 
    $("#elanceiframe").css('display ', 'none');
,
afterClose: function () 
    $("#elanceiframe").css('display ', 'block ');

我觉得不错。

您甚至可以操作 iframe 的 src 属性的值，这样您的文档就不会像 display: none 那样跳转

var thesrc;
$(".fancybox").fancybox(
    beforeLoad: function () 
        thesrc = $("#elanceiframe").attr("src");
        $("#elanceiframe").attr("src", "");
    ,
    afterClose: function () 
        $("#elanceiframe").attr("src", thesrc);
    
);

请参阅 JSFIDDLE。顺便说一句，您的一些 API 选项适用于 fancybox v1.3.x，不适用于 v2.x。检查文档以获取正确的选项：http://fancyapps.com/fancybox/#docs

【讨论】：

感谢您的帮助和建议！我的 Flash 在侧边栏 div 中，因此它不会影响页面的布局，但我最终调用了其他 CSS 来保存 div 的大小。但总的来说，事实证明我在函数中调用了错误的 div。