jQuery ipad/iphone 上的 Fancybox 覆盖问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14867977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancybox overlay issue on ipad/iphone
提问by IlludiumPu36
On ipad / iphone, the overlay appears over the top of media in fancybox, that is the whole page is filled with the overlay incuding the content of fancybox. Any ideas how I can fix this?
在ipad / iphone上，overlay出现在fancybox中媒体的顶部，即整个页面都填充了包含fancybox内容的overlay。有什么想法可以解决这个问题吗？
Also, I have jwplayer working in fancybox playing videos using html5, instead of Flash, but the problem is the overlay appearing on top of the video, so that when I touch the play button, fancybox goes away...
另外，我让 jwplayer 在使用 html5 而不是 Flash 播放视频的fancybox 中工作，但问题是出现在视频顶部的叠加层，所以当我触摸播放按钮时，fancybox 消失了......
See my previous question on my implementation of jwplayer in fancybox for ios at jwplayer in fancybox not playing on ipad/iphone
请参阅我之前关于我在 fancybox 中为 ios 实现 jwplayer 的问题，在 fancybox 中的jwplayer 未在 ipad/iphone 上播放
EDIT:
编辑：
Interestingly, if I comment out this block of css, I can click on the fancybox video on an ipad without it going away and play the video:
有趣的是，如果我注释掉这块 css，我可以在 ipad 上点击fancybox 视频而不会消失并播放视频：
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 9999;
background: url('fancybox_overlay.png');
}
Whilst fancybox then works OK on iPhone and iPad, the display of fancybox of desktop devices is less than desirable...
虽然fancybox 在iPhone 和iPad 上运行正常，但桌面设备fancybox 的显示效果却不尽如人意……
采纳答案by IlludiumPu36
If I change the css in jquery.fancybox.css to the following, all is fine on desktop and ios devices:
如果我将 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');
}
回答by Mandeep Pasbola
It may me due to z-index issue. Try adding these lines at last of the CSS file :
可能是因为 z-index 问题。尝试在 CSS 文件的最后添加这些行：
.fancybox-overlay{z-index:9999 !important}
.fancybox-wrap{z-index:99999 !important}
回答by Hugo St-Arnaud
I fixed this issue very simply by changing
我通过更改非常简单地解决了这个问题
.fancybox-inner {
overflow: hidden;
}
with
和
.fancybox-inner {
overflow: hidden;
zoom:1;
}
the zoom : 1 is a css trick that forces the element to always stay in focus and on top.
zoom : 1 是一个 css 技巧，它强制元素始终保持在焦点和顶部。
回答by Trevor Lundeen
This doesn't seem to be solved for everyone.. What appears to be happening with fancybox on mobile is the divs are not arranged correctly. This can be fixed by adding some tablet detection:
这似乎不是每个人都能解决的问题。fancybox 在移动设备上似乎发生的事情是 div 没有正确排列。这可以通过添加一些平板电脑检测来解决：
var MOBILE = $('html').hasClass('touch');
var TABLET = (MOBILE && screen.width >= 768);
Then you can move the containers around if you detect a tablet:
然后，如果您检测到平板电脑，您可以四处移动容器：
if (TABLET) {
$( '.fancybox-overlay' ).insertBefore( $( '.fancybox-wrap' ) );
}
This seemed to fix the issue for me. Hope this helps someone else out there!
这似乎为我解决了这个问题。希望这可以帮助其他人！
