javascript - 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？

我是否需要像 display:none 这样的 #elanceiframe div 开始使用 CSS？

编辑 12/04/13

上面的例子工作正常；我在函数中调用了错误的 div :(

Answer 1

代码中的选项

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

我觉得不错。

您甚至可以玩操作 src 的值iframe 的属性，因此您的文档不会像 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