jqModal afficher de manière incorrecte dans Safari Mobile

Question

J'ai une fenêtre jqModal sur mon site qui a son contenu peuplé par un appel Ajax. Il fonctionne très bien dans tous les navigateurs de bureau, mais il échoue dans Safari Mobile sur l'iPhone.

La superposition et la fenêtre se sont affichés sur le haut du corps de la page, plutôt que de couvrir la fenêtre iPhone. Si vous faites défiler, vous pouvez voir la fenêtre et la superposition positionné comme dans tout autre navigateur. Cela est particulièrement problématique parce que, pour un utilisateur de Safari Mobile, une fois faire défiler vers le bas et cliquez pour tirer vers le haut de la fenêtre modale, il n'y a aucune réponse -. La partie de l'écran avec la fenêtre modale est complètement invisible pour l'utilisateur

Je suis assez sûr que ce soit parce que jqModal utilise « position: fixed » dans son CSS, qui est effd sur l'iPhone pour diverses raisons. Voici un bon blog décrivant pourquoi: http://doctyper.com / archives / 200808 / positionnement-sur-mobile Safari fixe /

Je l'ai regardé quelques-unes des autres bibliothèques pour fenêtres modales (comme BlockUI) et ils ont le même problème dans Safari Mobile. Est-ce que quelqu'un sait comment modifier le jqModal de la css / pour résoudre ce problème? Vive

Answer 1

Peut-être essayer quelque chose comme ça pour positionner le 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

est en quelque sorte un hack, mais un travail décent autour. Je vois jqModal mettre le modal en haut de la page, de sorte que ce code fait défiler tout simplement vers le haut après avoir ouvert un modal:

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

J'ajouté à la fonction open dans jqmodal.js

d'essayer les démos qui viennent avec SimpleModal, ils semblent fonctionner correctement sur iPad / iPhone afin de migrer vers ce serait une autre solution: http://www.ericmmartin.com/projects/simplemodal/