iPhone上的Fancybox问题答案

【问题标题】：Fancybox problem on iPhoneiPhone上的Fancybox问题
【发布时间】：2016-09-21 04:33:54
【问题描述】：

Fancy box 似乎无法在 iPhone 和 iPad 上运行。

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

有什么解决办法吗？

谢谢， C

【问题讨论】：

标签： jquery iphone fancybox

【解决方案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});

【讨论】：

【解决方案2】：

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

fixed: false,

【讨论】：

【解决方案3】：

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

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

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

我意识到这可能会出于 SEO 原因从我的标签中删除，但它为使用移动设备查看您页面的人们提供了一种在新窗口中单击和查看所需内容的方式。

再次，我不确定这是否是一种可靠的方式，但我在过去 5 个小时里一直在阅读帖子和常见问题解答，试图提出一些建议。

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

【讨论】：

【解决方案4】：

相当老的问题，但这个插件在旧网站上运行。我注意到 Fancybox 使用一些简单的 JS 将“fancybox-lock”类添加到 HTML 标记中，我已将其添加到 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;
           }
        });
});

【讨论】：