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