我正在尝试在 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
:(
最佳答案
代码中的选项
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
关于javascript - Fancybox 2 beforeLoad 和 afterClose 在事件时不触发隐藏/显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20304895/