jqModal 在 Mobile Safari 中显示不正确

Question

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

覆盖层和窗口本身显示在页面主体的顶部，而不是覆盖 iPhone 视口。 如果向上滚动，您可以看到窗口和覆盖层的位置与在任何其他浏览器中一样。 这尤其成问题，因为对于 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');
 }

中的 open 函数中

我将其添加到jqmodal.js SimpleModal 附带的演示，它们似乎在 iPad/iPhone 上可以正常工作，因此迁移到 iPad/iPhone 将是另一种解决方案：
http://www.ericmmartin.com/projects/simplemodal/

Answer 2

也许尝试这样的方法来定位模态 div ？

作者：乔恩·布里斯宾

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