2

我发现了很多 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'
        }
    }
});

尽管文档称它可以被覆盖，但我无法更改任何内容。但是我可以从源文件进行更改，没关系

4

3 回答 3

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 已经说过的，您的代码中有错字 - 缺少逗号。

于 2017-05-20T04:32:25.950 回答
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>

于 2017-05-20T01:27:42.983 回答
1

记住那个代码：

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

必须留在：

opts:{

}

这种模式效果很好。

于 2019-09-15T17:19:05.783 回答