Fancybox overlay問題ipad/iphone

在ipad/iphone上，疊加層出現在fancybox中的媒體頂部，即整個頁面充滿了包含fancybox內容的疊加層。任何想法如何解決這個問題？Fancybox overlay問題ipad/iphone

此外，我有jwplayer在fancybox中使用html5而不是Flash來播放視頻，但問題在於視頻頂部出現覆蓋圖，所以當我觸摸播放按鈕時，fancybox就會消失...

見我剛纔的問題我實施的fancybox的iOS jwplayer在jwplayer in fancybox not playing on ipad/iphone

編輯：

有趣的是，如果我註釋掉的CSS的這個塊，我可以點擊上的的fancybox視頻沒有它離開和平板電腦的iPad Ÿ視頻：

.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的顯示並不理想......

來源

2013-02-14 IlludiumPu36

這是否也發生在PC（Internet Explorer，Firefox，Chrome）上的瀏覽器中？ – Uooo 2013-02-14 06:23:01

不，只在ios – IlludiumPu36 2013-02-14 07:44:29

查看https://groups.google.com/forum/?fromgroups=#!topic/fancybox/oUnAPbTisfY我看到的例子 – IlludiumPu36 2013-02-14 07:45:31

如果我在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-14 08:47:18 IlludiumPu36

注意自己和將來的用戶：注意位置類型的變化以及註釋掉z-index。 – mindtonic 2013-09-24 21:18:04

不適用於我。 – 2014-09-13 01:27:08

它可能我因爲z-index的問題。嘗試在最後的CSS文件中添加這些行：

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

來源

2013-02-14 06:19:56

做到了這一點，但沒有任何區別。我怎樣才能在CSS中刪除疊加層？ – IlludiumPu36 2013-02-14 07:03:34

我已經評論了背景：url（'fancybox_overlay.png'）;已刪除覆蓋...但觸摸播放按鈕的fancybox中的視頻仍然clocses fancybox ...使用closeClick：false，沒有任何區別的ipad。 – IlludiumPu36 2013-02-14 07:08:54

添加這個最後的CSS文件＃fancybox-overlay {display：none！important} – 2013-02-14 08:53:54

這似乎並沒有解決所有人..什麼似乎與移動fancybox發生的事情是divs沒有正確排列。這可以通過固定加入一些藥片檢測：

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

然後，你可以，如果你發現平板電腦四處移動容器：

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

這似乎解決這個問題對我來說。希望這可以幫助別人！ 1是一個CSS技巧，迫使元素始終處於焦點和頂部：

來源

2015-05-14 04:49:54

我改變

.fancybox-inner { 
    overflow: hidden; 
}

與

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

變焦修復了這個問題很簡單。

來源

2016-01-20 20:05:50

Fancybox overlay問題ipad/iphone

回答

相關問題