【问题标题】: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/iphonejwplayer 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 显示效果不太理想......

【问题讨论】:

标签: 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 技巧,它强制元素始终保持焦点和顶部。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多