jqModal displaying incorrectly in Mobile Safari

Question

I have a jQModal window on my site that has its content populated by an Ajax call. It works fine in all of the desktop browsers, but it fails in Mobile Safari on the iPhone.

The overlay and the window itself are displayed on the top of the body of the page, rather than covering the iPhone viewport. If you scroll up, you can see the window and the overlay positioned as in any other browser. This is especially problematic because, for a user of Mobile Safari, once they scroll down and click to pull up the modal window, there is no response whatsoever - the part of the screen with the modal window is completely invisible to the user.

I'm pretty sure this is because jqModal uses "position: fixed" in its CSS, which is effd on the iPhone for various reasons. Here's a good blog post describing why: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

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

Answer 1

This is sort of a hack but decent work around. I'm seeing jqmodal put the modal at the top of the page, so this code simply scrolls to the top after they open a 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');
 }

I added this to the open function in jqmodal.js

From trying the demos that come with SimpleModal, they seem to work correctly on iPad/iPhone so migrating to that would be another solution: http://www.ericmmartin.com/projects/simplemodal/