jqModal在移动Safari显示不正确

Question

我有我的网站上有通过Ajax调用填充其内容的jQModal窗口。它可以在所有的桌面浏览器的罚款，但它在移动Safari浏览器在iPhone上的失败。

在覆盖层和窗口本身被显示在页面的主体的顶部，而不是覆盖在iPhone视口。如果向上滚动，你可以看到窗口并定位为在任何其他浏览器覆盖。这是特别有问题的，因为对于移动Safari的用户，一旦向下滚动并单击拉上了模态窗口，有没有任何反应 - 与模态窗口在屏幕的一部分，是为了在用户完全不可见

我敢肯定，这是因为jqModal使用“的位置是：固定”在CSS，这是对iPhone effd因各种原因。这里有一个很好的博客文章介绍了原因： http://doctyper.com /档案/ 200808 /固定定位-上移动的Safari /

我看了一些其他的库模态窗口（如BlockUI），他们在移动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 ); 

Answer 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');
 }

我在jqmodal.js已将此添加到open功能

这是试图来与SimpleModal的演示，他们似乎在iPad / iPhone，以便迁移到，这将是另一种解决方案正常工作： http://www.ericmmartin.com/projects/simplemodal/