10

在ipad / iphone上，覆盖出现在fancybox媒体的顶部，即整个页面都被覆盖了fancybox的内容。有什么想法可以解决这个问题吗？

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

请参阅我之前关于我在fancybox for ios 中实现jwplayer 在fancybox 中的jwplayer 中的问题，而不是在ipad/iphone 上播放

编辑：

有趣的是，如果我注释掉这段 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 上运行良好，但桌面设备的 fancybox 显示效果却不尽如人意……

4

4 回答 4

11

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

.fancybox-overlay{z-index:9999 !important}
.fancybox-wrap{z-index:99999 !important}
于 2013-02-14T06:19:56.783 回答
8

如果我将 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');
}
于 2013-02-14T08:47:18.393 回答
1

我通过更改非常简单地解决了这个问题

.fancybox-inner {
    overflow: hidden;
}

和

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

zoom : 1 是一个 css 技巧，它强制元素始终保持焦点和顶部。

于 2016-01-20T20:05:50.123 回答
0

这似乎不是每个人都能解决的问题。fancybox 在移动设备上似乎发生的事情是 div 排列不正确。这可以通过添加一些平板电脑检测来解决：

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

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

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

这似乎为我解决了这个问题。希望这对其他人有帮助！

于 2015-05-14T04:49:54.697 回答