5

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

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

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

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

4

2 回答 2

2

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

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

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

于 2011-04-04T23:15:53.287 回答
0

也许尝试这样的事情来定位模态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 );
于 2009-11-05T00:28:48.403 回答