Question

I’ve found a very basic modal window script that’s working well on all browsers including the iPad. However, on the iPad it positions the modal window at the top of the site so if the user has scrolled to the bottom of the site, he’s unable to see it without scrolling upwards.

I thought something like this might help:

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

But it’s not working in that it still positions the div incorrectly, ie. not in the viewport.

Any suggestions much appreciated!

Answer 1

So the issue is iPad’s dislike for position: fixed. This is how I got around it:

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

Obviously it doesn’t vertically center the div on portrait iPad, but hey this is good enough, frankly!