jqModal mostrar incorrectamente en Mobile Safari

Question

Tengo una ventana jqModal en mi sitio que tiene su contenido poblado por una llamada Ajax. Funciona bien en todos los navegadores de escritorio, pero falla en Safari Mobile en el iPhone.

La superposición y la propia ventana se muestran en la parte superior del cuerpo de la página, en lugar de cubrir el área de visualización iPhone. Si se desplaza hacia arriba, se puede ver la ventana y la superposición posicionado como en cualquier otro navegador. Esto es especialmente problemático porque, para un usuario de Mobile Safari, una vez que desplazarse hacia abajo y haga clic para tirar de la ventana modal, no hay respuesta alguna. - la parte de la pantalla con la ventana modal es completamente invisible para el usuario

Estoy bastante seguro de que esto es debido a jqModal utiliza "position: fixed" en su CSS, que es effd en el iPhone, por diversas razones. He aquí una buena entrada en el blog que describe qué: http://doctyper.com / Archivos / 200808 /-posicionamiento fijo-a-móvil-safari /

He mirado algunas de las otras bibliotecas para ventanas modales (como BlockUI) y tienen el mismo problema en Mobile Safari. ¿Alguien sabe cómo modificar la jqModal js / css para solucionar este problema? Saludos

Answer 1

Tal vez intente algo como esto para colocar el div modal?

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

Answer 2

Esto es una especie de truco, sino el trabajo decente alrededor. Estoy viendo jqModal poner el modal en la parte superior de la página, por lo que este código simplemente se desplaza a la parte superior después de que abren un referente:

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

I añadió esta a la función open en jqmodal.js

De tratando las demostraciones que vienen con SimpleModal, que parecen funcionar correctamente en iPad / iPhone por lo migrando a que sería otra solución: http://www.ericmmartin.com/projects/simplemodal/