1

我写了一个相当简单的 jQuery 模态，因为我不想让任何东西变得沉重。除 iPad 外，该模式在所有浏览器上都能正常工作。

如果我在页面底部并单击以打开灯箱，它将在页面顶部打开而看不见。

我没有使用 jQuery 来定位窗口只是纯 css 任何人都可以看到为什么这会在 iPad 之外的所有其他浏览器中工作？

＃灯箱 {
    位置：固定；/* 将灯箱窗口保持在当前视口中 */
    顶部：0；
    左：0；
    宽度：100%；
    高度：100%；
    z指数：2；
    背景色：rgba(0, 0, 0, 0.2);
    字体粗细：100；
    边距：0 0 .1em 0；
    颜色：#f8ef71；
    文字阴影：1px 1px 1px #af7913;
    文本对齐：居中；
}
4

2 回答 2

2

position:fixed 不是普遍支持的，我猜你的iOS版本低于5，这是第一个支持它的iOS版本？此模式也不会在 IE6 和 7 上。如果没有，它也不会在 Android 2.3 及更少版本中运行如果不通过视口元标记禁用缩放，

您将面临的另一个困难 position:fixed 是它相对于窗口，而不是视口，因此在缩放元素时不会出现您想要的样子。这就是为什么他们在没有禁用缩放的情况下禁用了 android 2.3 中的固定（或者我相信），尽管他们在以后的 android 版本中改变了这个位置。

这是一个相关的问题： CSS“位置：固定；” 在 iPad/iPhone 上？

于 2012-05-15T09:26:04.927 回答
1

感谢 Ed Kirk 提醒我 iOS pre version 5 中的位置固定问题

我写了一个小JS来解决我的问题

如果（navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'）
        {
            变量 cssObj = {
                '背景色' : 'rgba(0, 0, 0, 0)',
                “位置”：“绝对”，
                'top' : $(document).scrollTop()
            };

            $('#lightbox').css(cssObj);
            $(window).scroll(function() {$('#lightbox').animate({top: $(document).scrollTop()}, 300);});
        };
于 2012-05-15T10:17:32.523 回答