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

尽管文档调用它可以被覆盖我不能改变anything.Hovewer我可以从源文件改变它没问题

Answer 1

您在对象的属性中缺少 ,

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<a data-fancybox class="fancyboxedit" data-src="http://fancyapps.com/fancybox/3/docs/" href="javascript:;">
 <input type='submit' value='Submit'>
 </a>

Answer 2

我们鼓励您使用 CSS -

设置 iframe width/height

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

这使您可以轻松地将 width/height 与其他 CSS 属性（例如 min-width/max-width）结合使用，并使用媒体查询。默认的 iframe 尺寸也是使用 CSS 设置的。

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

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

而且，正如 Dat Nguyen 所说，您的代码中有错字 - 缺少逗号。

Answer 3

记住密码：

iframe : {
   css : {
      width : '600px',
      height: '800px'
   }
}

必须入住：

opts:{

}

这种模式会很好用。

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

Fancybox 3 Cant override width and height of iframe

jquery

fancybox-3