Keeping a jQuery modal within an iPad viewport

问题

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.

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;
}

回答1:

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.

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.

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

回答2:

Thanks to Ed Kirk for alerting me to the position fixed problem in iOS pre version 5

I wrote a little JS to solve my problem

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);});
        };

来源：https://stackoverflow.com/questions/10597622/keeping-a-jquery-modal-within-an-ipad-viewport