iPhone上的Fancybox问题

Question

Fancy box似乎在iPhone和iPad上存在问题。

请在iPhone或iPad上访问http://fancybox.net/blog，并单击页面上的“5. 显示登录表单 立即尝试”。该表单未居中，当您尝试输入详细信息时，框会在页面上移动，使其无法使用。

有任何修复措施吗？

谢谢， C

- user141621

Answer 1

Fancybox会在浏览器窗口大小改变时尝试自动调整大小并居中显示，在iPad和iPhone上这个事件会频繁触发。对于fancy box 1.3.4，控制此行为的代码位于第608行：

$(window).bind("resize.fb", $fancybox.resize);

为了解决这个问题，我修改了fancybox JS的部分内容，并添加了另一个选项称为“resizeOnWindowResize”，您可以将其设置为false，以供iPad和iPhone用户使用，或完全禁用。

if(currentOpts.resizeOnWindowResize) {
   $(window).bind("resize.fb", $fancybox.resize);    
}

您还需要在$.fn.fancybox.defaults哈希映射中为此选项添加默认值。

然后，在调用fancybox时，您可以使用这个新选项：

$('#fancybox_link').fancybox(${'scrolling': 'no',
                              width: 'auto',
                              height: 'auto',
                              centerOnScroll: false,
                              resizeOnWindowResize : false});

- Jason Fotinatos

Answer 2

在Fancybox 2.0中，有一个新选项可以帮助我解决iPhone上的滚动问题：

fixed: false,

- Martin

Answer 3

好的，我是新手，不确定这是否适用于所有设备，但我已经在我的iPhone上管理好了它。我所做的是在iframe的媒体设置中勾选“显示标题”，并将位置设置为“内部”

当我创建链接或图像时，我将其作为标题：

<a href="http://www.fetalscreening.com/nuchal_screening.php" target="_blank">
  Click in having trouble with mobile device
</a>

我明白这样做可能会影响我的SEO标签，但它为使用移动设备查看您的页面的人提供了一种点击并在新窗口中查看所需内容的方法。

再次强调，我不确定这是一个确定的方法，但我已经花费了过去5个小时阅读文章和常见问题解答，尝试想出一些东西。

这符合我的目的。如果有其他建议，我很乐意听取。

- steve

Answer 4

这是一个相当老的问题，但我在旧网站上运行了这个插件。我注意到Fancybox会向HTML标签添加类"fancybox-lock"，使用一些简单的JS代码，我将其添加到BODY中，现在似乎可以正常工作。

希望这能帮助到某些人！

JQuery

$(function(){
     var fancyboxVisible = false;
        $(document).on('click', '.fancybox', function() {
           if(fancyboxVisible) {
               $('html, body').removeClass('fancybox-lock');
               fancyboxVisible = false;
           } else {
               $('html, body').addClass('fancybox-lock');
               fancyboxVisible = true;
           }
        });
});

- mikesh10