ipad/iphoneのFancyboxオーバーレイ問題

Question

ipad/iphoneの場合、オーバーレイはfancybox内のメディアの上部に表示されます。つまり、ページ全体がfancyboxの内容を含むオーバーレイで埋められます。どのように私はこれを修正することができる任意のアイデア？

また、Flashの代わりにhtml5を使用してfancyboxでビデオを再生するjwplayerで作業していますが、問題は再生ボタンに触れるとオーバーレイがビデオの上に表示されるためです。

私はCSSのこのブロックをコメントアウトした場合、私は上fancyboxビデオをクリックすることができ、

興味深いことに：

はjwplayer in fancybox not playing on ipad/iphone

EDITでiOS用fancyboxでjwplayerの私の実装に私の前の質問を参照してください。それがなくてもplaがなくてもipadビデオY：

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

fancyboxながら、その後、iPhoneやiPadで[OK]を動作しますが、デスクトップデバイスのfancyboxの表示が...それが原因のzインデックスの問題を私にしてもよい

Answer 1

私は、次の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 2

望ましい未満です。 CSSファイルの最後に以下の行を追加してみてください：

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

Answer 3

このみんなのために解決されていないようです...モバイル上のファンシーボックスで起こっているように見えるのは、部門が正しく配置されていないということです。これは、いくつかのタブレット検出を追加することによって固定することができます。

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

あなたがタブレットを検出した場合、あなたの周りのコンテナを移動することができます。

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

これは私のために問題を解決するように見えました。これが他の誰かを助けることを願っています！

Answer 4

私は

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

ズームで

.fancybox-inner { 
    overflow: hidden; 
} 

を変更することにより、非常に簡単にこの問題を修正：1常に焦点にし、上に滞在するための要素を強制的にCSSのトリックです。