垂直居中模式窗口/ div在ipad上

我發現了一個非常基本的模式窗口腳本，在包括iPad在內的所有瀏覽器上運行良好。但是，在iPad上，它將模式窗口定位在站點的頂部，因此如果用戶滾動到站點的底部，則無法向上滾動就看不到它。垂直居中模式窗口/ div在ipad上

我覺得這樣的事情可能會有所幫助：

//Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    if (navigator.userAgent.match(/iPad/i)) { 
    winH = winH + $(window).scrollTop(); 
    } 

    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2);

但它不是在工作，它仍然定位在div不正確，也就是說。不在視口中。

任何建議非常感謝！

來源

2011-12-31 circey

請參閱我的回答下面有關'position：fixed'的問題。 – circey 2011-12-31 06:35:18

所以問題是iPad的位置不喜歡：固定。這是我周圍如何到達：

if (navigator.userAgent.match(/iPad/i)) { 
var positionY = window.pageYOffset; 
boxH = 690 - 400; 
// 690 is Safari's usable area on ipad landscape 
// 400 is height of div 
positionM = positionY + boxH; 
//Set the popup window to center 
$(id).css('top', positionM); 
}

顯然不垂直居中的肖像iPad的股利，但嘿，這是不夠好，坦率地說！

來源

2011-12-31 06:34:39 circey

這是一個fiddle，它會讓你到你需要的地方。（注意位置：固定在CSS中）。基本上，所有你需要做的是給你的模態一個固定的位置，上邊距50％，左邊距50％，然後分別頂/左偏移50％的模態高度/寬度。

這當然會在早期版本的IE中出現問題（與「固定」屬性有關的問題）......但是，不管怎樣，您的普通iPad用戶可能不會滾動IE6。

.sample{ 
     position : fixed; 
     top  : 50%; 
     left  : 50%; 
     height  : 100px; 
     width  : 100px;   
     margin-left: -50px; 
     margin-top : -50px; 
     border  : 1px solid #000 
} 

<div class="sample">Sample</div>

來源

2011-12-31 05:31:02

感謝您的CSS - 我更喜歡在jQuery上，但它仍然不是垂直居中在iPad上。它居中，但在頂部768px。 – circey 2011-12-31 05:54:18

垂直居中模式窗口/ div在ipad上

回答

相關問題