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

时间:2017-05-20 01:20:16

标签: jquery fancybox-3

我发现了很多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文档调用它可以被覆盖我不能改变任何东西。我可以从源文件更改它没关系

3 个答案:

答案 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:{

}

此模式会很好用。