jqModal неправильно отображается в Mobile Safari - PullRequest
Новая
       13

jqModal неправильно отображается в Mobile Safari

5 голосов
/ 12 июня 2009

У меня на сайте есть окно jQModal, содержимое которого заполняется вызовом Ajax. Он отлично работает во всех настольных браузерах, но не работает в Mobile Safari на iPhone.

Наложение и само окно отображаются в верхней части тела страницы, а не закрывают область просмотра iPhone. Если вы прокрутите вверх, вы увидите окно и оверлей, расположенные как в любом другом браузере. Это особенно проблематично, потому что для пользователя Mobile Safari, когда он прокручивает вниз и щелкает, чтобы открыть модальное окно, никакой реакции не происходит - часть экрана с модальным окном полностью невидима для пользователя.

Я почти уверен, что это связано с тем, что jqModal использует «position: fixed» в своем CSS, который по разным причинам используется на iPhone. Вот хороший пост в блоге, объясняющий почему: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Я посмотрел некоторые другие библиотеки для модальных окон (например, BlockUI), и у них та же проблема в Mobile Safari. Кто-нибудь знает, как изменить jqModal js / css, чтобы это исправить? Приветствия

Ответы [ 2 ]

2 голосов
/ 05 апреля 2011

Это что-то вроде хака, но приличная работа. Я вижу, что 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/

0 голосов
/ 05 ноября 2009

Может быть попробовать что-то вроде этого, чтобы расположить модальный div?

Через Джона Брисбина 

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