Question

在iPhone和iPad上使用Fancy box似乎有问题。

转到此处http://fancybox.net/blog，然后点击iPhone或ipad页面上的“5.显示登录表单立即尝试”。表单不是中心，当您尝试输入详细信息时，框会在页面上移动并使其无法使用。

任何修复？

谢谢， ç

Answer 1

每次调整浏览器窗口大小时，Fancybox都会尝试自动调整大小并居中，并且此事件会在iPad和iPhone上被触发很多。对于奇特的方框1.3.4，控制它的代码是第608行：

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

为了解决这个问题，我修改了fancybox JS的这一部分，并添加了另一个名为“resizeOnWindowResize”的选项，你可以为iPad和iPhone用户设置为false，或者只是一起禁用它们。

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

Answer 2

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

fixed: false,

Answer 3

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

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

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

我意识到这可能会因为我的标签而导致出于搜索引擎优化的原因，但它会让人们通过移动设备查看您的网页，以便在新窗口中点击并查看您需要的内容。

我再也不确定这是否是一种确定的消防方式，但我花了最近5个小时阅读帖子和常见问题解答试图提出一些建议。

它符合我的目的。如果有人有任何其他建议，我会全力以赴。

Answer 4

相当老的问题，但是这个插件在旧网站上运行。我注意到Fancybox添加了类＆＃34; fancybox-lock＆＃34;在HTML标签上，使用一些简单的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;
           }
        });
});

iPhone上的Fancybox问题

4 个答案: