jquery - jqModal 在 Mobile Safari 中显示不正确

Question

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

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

我很确定这是因为 jqModal 在其 CSS 中使用了“position:fixed”，而由于各种原因，它在 iPhone 上是 effd 的。这是一篇很好的博客文章，描述了原因: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 上正常工作，因此迁移到 iPad/iPhone 将是另一种解决方案: http://www.ericmmartin.com/projects/simplemodal/