ipad에서 세로로 가운데 맞춤 모달 창/div

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

을하지만 여전히 즉, 잘못 사업부를 위치 점에서 작동하지 않습니다 :

나는 이런 식으로 뭔가 도움이 될 생각했다. 뷰포트에는 없습니다.

의견을 보내 주시면 감사하겠습니다.

Answer 1

그래서 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); 
} 

가 수직 세로 아이 패드에 사업부를 중심하지 않지만, 헤이 이것은 솔직히 충분 : 이것은 내가 주위 있었는지입니다!

Answer 2

여기에 fiddle이 있어야 원하는 위치로 이동할 수 있습니다. (positon에주의를 기울이십시오 : css에서 고쳐 씀). 기본적으로 모달의 고정 된 위치, 위쪽 여백 50 %, 왼쪽 여백 50 %를 설정 한 다음 모달 높이/너비의 50 % 위쪽/왼쪽 간격을 각각 오프셋하면됩니다.

이것은 이전 버전의 IE ('고정'속성과 관련된 문제)에서 무너질 것입니다 ...하지만 다시 한 번 평범한 iPad 사용자는 아마도 IE6을 굴리지 않을 것입니다.

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