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

Altough文档调用它可以被覆盖我不能改变任何东西。我可以从源文件更改它没关系

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所说，你的代码中有拼写错误 - 缺少逗号。

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>

Answer 3

记住该代码：

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

必须留在：

opts:{

}

此模式会很好用。

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

3 个答案: