jqModal 在 Mobile Safari 中显示不正确

Question

我的站点上有一个 jQModal 窗口，其内容由 Ajax 调用填充。它在所有桌面浏览器中都能正常工作，但在 iPhone 上的 Mobile Safari 中却失败了。

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

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

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

Answer 1

这是一种 hack，但工作得体。我看到 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 );