Geek Answers Handbook

JqModal does not display correctly in Mobile Safari

I have a jQModal window on my site that has content populated with an Ajax call. It works great in all desktop browsers, but it doesn't work on Mobile Safari on the iPhone.

The overlay and the window itself are displayed at the top of the page body, and do not cover the iPhone viewport. If you scroll up, you will see a window and an overlay located just like in any other browser. This is especially problematic because for the Mobile Safari user, when they scroll down and click to pull out the modal window, there is no reaction - the part of the screen with the modal window is completely invisible to the user.

I am sure that this is due to the fact that jqModal uses "position: fixed" in its CSS, which affects iPhone differently. Here is a good blog post describing why: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

I looked through some of the other libraries for modal windows (such as BlockUI) and they have the same problem in Mobile Safari. Does anyone know how to modify jqModal js / css to fix this? Greetings

+5
source share
2 answers

Maybe try something like this to place a modal div?

Via John Brisbane

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 );
0
source

, . , 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/

+2

More articles:


All Articles