JQModal은 모바일 사파리에서 잘못 표시됩니다

StackOverflow https://stackoverflow.com/questions/988224

문제

내 사이트에 ajax 호출로 컨텐츠가 채워진 JQModal 창이 있습니다. 모든 데스크탑 브라우저에서 잘 작동하지만 iPhone의 Mobile Safari에서는 실패합니다.

오버레이와 창 자체는 iPhone 뷰포트를 덮지 않고 페이지의 본문 상단에 표시됩니다. 위로 스크롤하면 다른 브라우저와 같이 창과 오버레이가 표시 될 수 있습니다. Mobile Safari 사용자의 경우 아래로 스크롤하고 클릭하여 모달 창을 끌어 올리면 응답이 없기 때문에 이것은 특히 문제가됩니다. 모달 창이있는 화면의 일부는 사용자가 완전히 보이지 않기 때문입니다.

JQModal이 CSS에서 "위치 : 고정"을 사용하기 때문에 여러 가지 이유로 iPhone의 EFFD를 사용하기 때문입니다. 다음은 이유를 설명하는 좋은 블로그 게시물입니다. http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

나는 Modal Windows (예 : Blockui)의 다른 라이브러리를 보았고 Mobile Safari에서도 같은 문제가 있습니다. 이 문제를 해결하기 위해 JQModal JS/CSS를 수정하는 방법을 아는 사람이 있습니까? 건배

도움이 되었습니까?

해결책

모달 div를 배치하기 위해 이와 같은 것을 시도할까요?

Jon Brisbin을 통해

function showModal() { 
  var win_y = $(window).height(); 
  var scroll_y = $(window).scrollTop(); 
  $("#modal_div").css({ top: scroll_y + "px" }); 
} 

var showTimer = false; 
function maybeShowModal(evt) { 
  if ( showTimer ) { 
    clearTimeout( showTimer ); 
  } 
  showTimer = setTimeout( showModal, 175 ); 
} 

$(window).bind( "scroll", maybeShowModal );

다른 팁

이것은 일종의 해킹이지만 괜찮은 일입니다. JQModal이 모달을 페이지 상단에 놓는 것을보고 있습니다. 따라서이 코드는 모달을 열면 단순히 상단으로 스크롤됩니다.

 if( navigator.userAgent.match(/iPhone/i) || 
  navigator.userAgent.match(/iPad/i) || 
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/Android/i)){
    $('html, body').animate({scrollTop:0}, 'slow');
 }

나는 이것을 open jqmodal.js의 기능

Simplemodal과 함께 제공되는 데모를 시도하면 iPad/iPhone에서 올바르게 작동하는 것처럼 보이므로 다른 해결책이 될 것입니다.http://www.ericmmartin.com/projects/simplemodal/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top