iPhone上的Fancybox问题

在iPhone和iPad上使用花式盒似乎有问题。

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

任何修复?

谢谢,C

每次调整浏览器窗口大小时,Fancybox都会尝试自动resize和居中,并且此事件会在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}); 

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

 fixed: false, 

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

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

  Click in having trouble with mobile device  

我意识到这可能会从我的标签中删除出于搜索引擎优化的原因,但它可以让人们通过移动设备查看您的页面,从而在新窗口中单击并查看所需内容。

我不确定这是否是一种确定的消防方式,但我花了最近5个小时阅读post和常见问题解答试图找出一些东西。

它符合我的目的。 如果有人有任何其他建议我都会听到。

相当古老的问题,但是这个插件在一个旧网站上运行。 我注意到Fancybox将类“fancybox-lock”添加到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; } }); });