在iPad视口中保持jQuery模态 [英] Keeping a jQuery modal within an iPad viewport

问题描述

我写了一个相当严厉的jQuery模态，因为我不想要任何东西重。除了iPad，所有浏览器都可以使用modal。

I've written a fairly stright forward jQuery modal as I didn't want anything to heavy. The modal works fine on all browsers apart from the iPad.

如果我在页面的底部，点击打开灯箱，页面出来。

If I am at the bottom of the page and click to open the lightbox it will open at the top of the page out of view.

我不是使用jQuery来定位窗口只是纯CSS任何人都可以看到为什么这将工作在除iPad之外的所有其他浏览器？ / p>

I'm not using jQuery to position the window just pure css can anyone see why this would work in all other browsers apart from the 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;
}

推荐答案

position：fixed不支持通用，是不是版本5，这是第一个iOS版本支持呢？这种模式也不会在IE6和7。

position:fixed is not universally supported, I presume your iOS version is less than version 5, which is the first iOS release to support it? This modal will also not on IE6&7. Nor will it work in Android 2.3 and less without disabling zoom via the viewport meta tag.

您将面对的另一个困难：位置：固定的是它是相对于窗口，而不是视口，因此当缩放元素不会如何你想要它。这是为什么他们禁用固定在Android 2.3没有禁用缩放（或我相信），虽然他们改变了位置在这个在后来的Android版本。

Another difficulty you'll face with position:fixed is that it's relative to the window, not the viewport, thus when zooming the element will not appear how you want it. This is why they disabled fixed in android 2.3 without disabling zoom (or so I believe), although they changed position on this in later android releases.

这里有一个相关问题：
CSS位置：固定;进入iPad / iPhone？

Here's a related question: CSS "position: fixed;" into iPad/iPhone?

这篇关于在iPad视口中保持jQuery模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！