ipad/iphone 上的 Fancybox 覆盖问题答案

【问题标题】：Fancybox overlay issue on ipad/iphoneipad/iphone 上的 Fancybox 覆盖问题
【发布时间】：2013-01-29 20:24:51
【问题描述】：

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

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

在jwplayer in fancybox not playing on ipad/iphone 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 上运行良好，但桌面设备的 fancybox 显示效果不太理想......

【问题讨论】：

PC 上的浏览器（Internet Explorer、Firefox、Chrome）是否也会发生这种情况？
查看groups.google.com/forum/?fromgroups=#!topic/fancybox/… 了解我所看到的示例

标签： jquery fancybox jwplayer fancybox-2

【解决方案1】：

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

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

【讨论】：

做到了，但没有区别。如何在 css 中完全删除覆盖？
我已经注释掉了背景：url('fancybox_overlay.png');这已经删除了覆盖...但是在fancybox中触摸视频的播放按钮仍然会关闭fancybox...使用closeClick：false，在ipad上没有任何区别。
在 CSS 文件的最后添加 #fancybox-overlay{display:none!important}
强制使用像.fancybox-wrap{z-index:99999 !important} 这样的任意高堆叠索引的z-index 并不是一个好习惯。我强烈推荐阅读这篇文章：css-tricks.com/rational-z-index-values，它详细讨论了这种糟糕的开发策略。在实践中，您应该始终找出所需的合理限制，以便您可以在常规 DOM 堆叠方案的规范边界内继续递增。

【解决方案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');
}

【讨论】：

给自己和未来用户的注意事项：注意位置类型的变化以及 z-index 的注释。

【解决方案3】：

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

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

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

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

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

【讨论】：

【解决方案4】：

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

.fancybox-inner {
    overflow: hidden;
}

与

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

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

【讨论】：