Question

我正在使用jQuery的colorbox在页面上打开iframe。在页面上有两个闪存SWF。当我单击打开颜色框的按钮时，那些闪光SWF显示在我的颜色框div的顶部。我已经检查了颜色框的CSS属性，并且叠加层有position:absolute和z-index:999。我已经为SWF提供了z-index:0属性，但它们仍显示在彩色框的顶部。这种情况发生在Firefox，IE和Chrome中。

Answer 1

对于使用 Youtube 或 Vimeo 的 iframe 嵌入代码的用户，您必须采用不同的方法。我使用事件 onOpen 和 onClosed 隐藏并显示iframe。这是一个例子：

$('.selector').colorbox({
    inline: true,
    href: '.step.'+target,
    rel: 'steps',
    onOpen: function(){
        $('iframe').css('visibility','hidden');
    },
    onClosed: function(){
    $('iframe').css('visibility','visible');
    },
    loop: false,
    opacity: 0.5
});

我想如果您想将它作为快速解决方案应用于嵌入或对象标记，它也会有效。

Answer 2

http://jacklmoore.com/colorbox/faq/#faq-flash

Answer 3

如果您的问题恰好是Youtube Specific，这是我发现修复它的最简单方法：

<iframe src="http://www.youtube.com/embed/b-LJ7pYNI0I?
wmode=transparent" width="590" height="332" frameborder="0" ></iframe>

也就是说，追加最终获取参数＆＃39;？wmode = transparent＆＃39;到iframe src。

来源：http://groups.google.com/group/slimbox-support/msg/39d42c9e0b6a7093

Answer 4

确保您的闪光灯使用支持z-indexing的窗口模式，例如透明。这是使用swfobject或类似方法启动闪存时定义的。

几乎可以肯定这将是问题，但可能是你的div的堆叠顺序有点混乱。 请记住，z-indexing不是全局层次结构，它从父元素中获取索引。

Answer 5

Jorge's answer的替代版本：

onOpen: function(){
  $('embed:visible').css('visibility','hidden').addClass('colorbox-hidden-fix');
},
onClosed: function(){
  $('embed.colorbox-hidden-fix').css('visibility','visible');
}

这可以处理embed元素，如果您的网页上有这样的元素。它还尝试不显示最初隐藏的元素。也应该与其他类型一起使用，只需用embed代替。 iframe。

Answer 6

如果您将iframe用于具有Flash内容的外部网站，则可以使用下一代码。

onClosed:function(){
        $('#iframe').attr('src', 'http://iframeurl.com/');
        $('#iframe').show();
},
onOpen:function(){
        $('#iframe').hide();
        $('#iframe').removeAttr('src');
}

享受。

Colorbox在闪光灯下显示

6 个答案: