我发现了很多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文档调用它可以被覆盖我不能改变任何东西。我可以从源文件更改它没关系
答案 0 :(得分:3)
我们鼓励您使用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所说,你的代码中有拼写错误 - 缺少逗号。
答案 1 :(得分: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>
答案 2 :(得分:0)
记住该代码:
iframe : {
css : {
width : '600px',
height: '800px'
}
}
必须留在:
opts:{
}
此模式会很好用。