Fancybox 3无法覆盖iframe的宽度和高度 [英] Fancybox 3 Cant override width and height of iframe

问题描述

我找到了很多fancybox2解决方案，但没有找到一个fancybox3解决方案. 所以第一件事

I found a lot of fancybox2 solutions but not a single fancybox 3 solution. So the first thing

我的iframe中有一个类似的HTML

I have a html like that in my 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'
        }
    }
});

尽管文档中称它可以被覆盖，但我无法更改任何内容.但是我可以从源文件中更改它，这是可以的

Altough the documentation is calling it can be overwritten I cant change anything.Hovewer I can change from source file it is ok

推荐答案

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

The idea is that you are encouraged to set iframe width/height using CSS -

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

这使您可以轻松地将width/height与其他CSS属性(如min-width/max-width)结合起来，并使用媒体查询.默认的iframe尺寸也是使用CSS设置的.

This allows you to easily combine width/height with other CSS properties like min-width/max-width and use media queries. The default iframe dimensions are set using CSS, too.

除此之外，如果您需要使用JS覆盖CSS值，则可以这样做:

Besides this, if you need to overwrite CSS values using JS, you can do it like this:

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

而且，正如Dat Nguyen所说，您的代码中有错别字-缺少逗号.

And, as Dat Nguyen already said, you have typo in your code - missing comma.

这篇关于Fancybox 3无法覆盖iframe的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！