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

Question

我正在尝试在 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 :(

Answer 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