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

У меня на сайте есть окно 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 ответа

Решение

Может быть, попробовать что-то вроде этого, чтобы позиционировать модальный 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 );
Источник

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

Источник
Другие вопросы по тегам