在iPad視口中保持jQuery模態

我已經寫了一個相當直接的前向jQuery模態，因爲我不想要任何沉重的東西。除了iPad之外，該模式在所有瀏覽器上都可以正常工作。在iPad視口中保持jQuery模態

如果我在頁面底部並點擊打開燈箱，它將在頁面頂部打開。

我沒有使用jQuery來定位窗口只是純css任何人都可以看到爲什麼這可以在所有其他瀏覽器除了iPad？

 
#lightbox { 
    position:fixed; /* keeps the lightbox window in the current viewport */ 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index: 2; 
    background-color: rgba(0, 0, 0, 0.2); 
    font-weight: 100; 
    margin: 0 0 .1em 0; 
    color: #f8ef71; 
    text-shadow: 1px 1px 1px #af7913; 
    text-align: center; 
}

來源

2012-05-15 Brob

position：fixed沒有得到普遍支持，我推測你的iOS版本低於版本5，這是第一個支持它的iOS版本？這種模式也不會在IE6上& 7.它也不會在Android 2.3及更低版本中工作沒有禁用通過視口元標記進行縮放。

您將面臨的另一個難題是position：fixed是相對於窗口而不是視口，因此縮放元素時不會顯示您想要的樣式。這就是爲什麼他們禁用固定在android 2.3而不禁用縮放（或者我相信），儘管他們在後來的android版本中改變了位置。

這裏有一個相關的問題： CSS "position: fixed;" on iPad/iPhone?

來源

2012-05-15 09:26:04

感謝埃德柯克以提醒我的位置固定的問題在IOS前的版本5

我寫了一個小JS解決我的問題

 
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') 
     { 
      var cssObj = { 
       'background-color' : 'rgba(0, 0, 0, 0)', 
       'position' : 'absolute', 
       'top' : $(document).scrollTop() 
      }; 

      $('#lightbox').css(cssObj); 
      $(window).scroll(function() {$('#lightbox').animate({top: $(document).scrollTop()}, 300);}); 
     };

來源

2012-05-15 10:17:32 Brob

在iPad視口中保持jQuery模態

回答

相關問題