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

Question

我发现了很多fancybox2的解决方案，但没有一个fancybox3的解决方案。 所以第一件事：

我有一个像这样的html在我的iframe中：

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


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

尽管文档中说可以被覆盖，但我无法更改任何东西。但是，如果我从源文件中更改，则可以。

- Mehmetali Saraç

Answer 1

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

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

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

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

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

而且，正如Dat Nguyen已经指出的那样，您的代码中有错别字——逗号缺失。

- Janis

Answer 2

您的对象属性中缺少了 "," 符号。

$(".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>

- Dat Nguyen

Answer 3

remember that code:

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

必须保留在其中：

opts:{

}

这种模式将非常有效地运作。

- Anderson Martines