Question

我的网站上有一个jQModal窗口，其内容由Ajax调用填充。它适用于所有桌面浏览器，但在iPhone上的Mobile Safari中失败。

叠加层和窗口本身显示在页面正文的顶部，而不是覆盖iPhone视口。如果向上滚动，您可以看到窗口和叠加层位于任何其他浏览器中。这尤其成问题，因为对于Mobile Safari的用户，一旦他们向下滚动并单击以拉出模态窗口，就没有任何响应 - 具有模态窗口的屏幕部分对用户完全不可见。

我很确定这是因为jqModal在其CSS中使用“position：fixed”，这是因为各种原因在iPhone上出现的。这是一篇很好的博客文章，描述了原因：http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

我已经查看了其他一些模式窗口库（例如BlockUI），他们在Mobile Safari中遇到了同样的问题。有谁知道如何修改jqModal js / css来解决这个问题？干杯

Answer 1

这是一种黑客攻击，但体面的工作。我看到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');
 }

我将此添加到jqmodal.js中的open函数

通过尝试SimpleModal附带的演示，它们似乎在iPad / iPhone上正常工作，因此迁移到那将是另一种解决方案： http://www.ericmmartin.com/projects/simplemodal/

Answer 2

也许尝试这样的东西来定位模态div？

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

jqModal在Mobile Safari中显示不正确

2 个答案: