Fancybox 3 无法覆盖 iframe 的宽度和高度

Question

我找到了很多 fancybox2 解决方案，但没有找到一个 fancybox 3 解决方案。所以第一件事

我的 iframe 中有一个类似的 html

<a data-fancybox class="fancyboxedit" data-src="facebook" href="javascript:;">
 <input type='submit' value='Submit'>
 </a>


$(".fancyboxedit").fancybox({
    iframe : {
        css : {
            width : '600px'
      height: '800px'
        }
    }
});

尽管文档称它可以被覆盖，但我无法更改任何内容。但是我可以从源文件更改，这是可以的

Answer 1

我们的想法是鼓励您使用 CSS 设置 iframe 宽度/高度 -

.fancybox-slide--iframe .fancybox-content { .. }

这使您可以轻松地将宽度/高度与其他 CSS 属性（例如最小宽度/最大宽度）结合起来并使用媒体查询。默认 iframe 尺寸也是使用 CSS 设置的。

除此之外，如果你需要使用 JS 覆盖 CSS 值，你可以这样做：

$("[data-fancybox]").fancybox({
    iframe : {
        css : {
            width  : '800px',
            height : '600px'
        }
    }
});

而且，正如 Dat Nguyen 已经说过的那样，您的代码中有拼写错误 - 缺少逗号。