jqModal在Mobile Safari中显示不正确

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

也许尝试这样的方法来定位模态 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 );