Question

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

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

这是因为iFrame不尊重IE中的z-index，并且不会被Fancybox“淡出”并且与Fancybox图像一起位于前景中。所以我希望在{Fancybox正在运行时display:none #elanceiframe div。

这是fancybox init函数，它运行组合确定，但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

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

1 个答案: