Question

我发现了一个非常基本的模态窗口脚本，适用于包括iPad在内的所有浏览器。但是，在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，即。不在视口中。

任何建议都非常感谢！

Answer 1

这是一个fiddle，它可以让你到达你需要的地方。（注意位置：固定在css中）。基本上，你需要做的就是给你的模态一个固定的位置，上边距50％，左边距50％，然后分别偏离你的模态高度/宽度的50％的上/下。

当然，这会在早期版本的IE中出现问题（“固定”属性的问题）......但是，无论如何，您的普通iPad用户可能还没有滚动IE6。 / p>

.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>

Answer 2

所以问题是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放在纵向iPad上，但嘿，这很好，坦率地说！

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

2 个答案: