Fancybox 3 Cant override width and height of ifram

问题:

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

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

回答1:

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

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

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.

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

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

回答2:

You are missing , in attributes of object

$(".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>