Question

在ipad / iphone上，叠加层显示在fancybox中的媒体顶部，即整个页面都填充了包含fancybox内容的叠加层。我有什么想法可以解决这个问题吗？

另外，我让jwplayer在fancybox中使用html5而不是Flash播放视频，但问题是视频顶部出现了叠加层，所以当我触摸播放按钮时，fancybox就会消失...

在jwplayer in fancybox not playing on ipad/iphone

上查看我在fancybox for ios中实现jwplayer的上一个问题

修改

有趣的是，如果我评论出这块css，我可以点击ipad上的fancybox视频而不会消失并播放视频：

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 9999;
background: url('fancybox_overlay.png');
}

虽然fancybox在iPhone和iPad上运行良好，但桌面设备的显示效果还不尽如人意......

Answer 1

可能是由于z-index问题。尝试在CSS文件的最后添加这些行：

.fancybox-overlay{z-index:9999 !important}
.fancybox-wrap{z-index:99999 !important}

Answer 2

如果我将jquery.fancybox.css中的css更改为以下内容，那么在桌面和ios设备上一切正常：

.fancybox-overlay {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
/*    z-index: 9999;*/
background: url('fancybox_overlay.png');
}

Answer 3

我通过更改

非常简单地解决了这个问题

.fancybox-inner {
    overflow: hidden;
}

与

.fancybox-inner {
    overflow: hidden;
    zoom:1;
}

缩放：1是一种css技巧，它会强制元素始终保持对焦并位于顶部。

Answer 4

这似乎并没有为所有人解决..移动设备上的fancybox似乎正在发生的事情是div没有正确排列。这可以通过添加一些平板电脑检测来解决：

var MOBILE = $('html').hasClass('touch');
var TABLET = (MOBILE && screen.width >= 768);

然后，如果您检测到平板电脑，则可以移动容器：

if (TABLET) {
    $( '.fancybox-overlay'  ).insertBefore( $( '.fancybox-wrap' ) );
}

这似乎解决了我的问题。希望这可以帮助其他人！

ipad / iphone上的Fancybox重叠问题

4 个答案: