Question

我设置了一个fancybox来将表单加载为iframe。 Fancybox根据iframe内容的大小自动调整大小。这很好用。但是如果我现在发送表单并且有错误，iframe内容会变得更高，所以fancybox必须调整大小才会发生。

但是在调整大小期间，我会看到丑陋的滚动条，直到灯箱调整大小以匹配新内容。

是否有可能在没有滚动条的情况下调整fancybox？可能正确的事件中的css属性overflow: hidden;可以做到这一点吗？

我的fancybox设置非常基本

$(".popup").fancybox({
    type: 'iframe',
    padding: 0
});

Answer 1

解决方案是：

我正在阅读FancyBox 2的文档，我将设置调整为：

$(".popup").fancybox({
    type: 'iframe',
    padding: 0,
    iframe: {
        scrolling : 'no'
    }
});

这会隐藏滚动条。但调整大小发生得很晚。显示新内容后大约需要1秒，直到fancybox调整为iframe中的新内容尺寸。

如果在iframe中加载的网站由您自己拥有。您可以将以下jquery代码添加到fancybox iframe中加载的页面的<body>中：

<script>
        (function() {
            parent.$('.fancybox-inner').height($('body').innerHeight());
            parent.$.fancybox.reposition();
        })();
</script>

Fancybox现在可以在加载内容后立即调整大小。

Answer 2

不确定您的具体情况，但添加

function myFunc(){
    $(".fancybox-iframe").attr("scrolling", "no");
}

应该一劳永逸地从iframe中删除滚动条。

您可以将其添加为fancybox的回调函数。

'callBackOnShow': myFunc()

在fancybox 2的大小调整期间iframe滚动条

2 个答案: