调整 Fancybox iframe 覆盖宽度和高度时出现问题答案

【问题标题】：Problem adjusting Fancybox iframe overlay width and height调整 Fancybox iframe 覆盖宽度和高度时出现问题
【发布时间】：2011-05-18 16:50:12
【问题描述】：

我正在使用 Fancybox 创建带有 iframe 的叠加层，一切正常，但我似乎无法更改宽度/高度的值。我正在使用 fancybox-1.2.6 和 jquery1.2.6

$(document).ready(function() {

        $("a.iframe").fancybox({
     'width' : '75%',
     'height' : '75%',
     'autoScale' : false,
     'transitionIn' : 'none',
     'transitionOut' : 'none',
     'type' : 'iframe'
});
    });

和

<a class="iframe" id="iframe" title="Sample title" href="http://google.com/">iframe</a>

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

这是在固定大小的花式框中手动打开 iframe 的方法

$.fancybox.open({
  'href': 'mypage.html',
  'type': 'iframe',
  'autoSize': false,
  'width': 800,
  'height': 800
});

【讨论】：

（关键在于 autoSize: false）

【解决方案2】：

您必须直接更改它的 css，因为 fancybox 实际上并不是 jquery 的一部分。

$("#fancybox").css({'width': '500px', 'height': '500px'});

有那种方式或类似的东西，

jQuery(document).ready(function() {
$.fancybox(
    {
        'autoDimensions'    : false,
        'width'             : 350,
        'height'            : 'auto',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
    }
);
});

【讨论】：

我也看到你有 $("a.iframe").fancybox({ 为什么里面有 "a"。你不需要它就去 $(".iframe")
这种变化仍然不允许我控制 iframe 的宽度 :(

【解决方案3】：

我通过向链接标签添加宽度和高度属性解决了这个问题，如下所示：

<a id="various3" href="action.html" width="60%" height="60%">Iframe</a>

还有你花哨的代码：

$("#popup").fancybox({
    'autoScale'     : false,
    'width'         : $("a#popup").attr("width"),
    'height'        : $("a#popup").attr("height"),
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic',
    'type'          : 'iframe'
});

【讨论】：

【解决方案4】：

请不要使用火狐。它不起作用，他们没有使高度兼容，请尝试使用 chrome！（今天最新的 Firefox！）如果是支持的浏览器，去掉 px 的引号，加上 % 的引号，比如：

'width': 400; //400 pixels;
'width': '75%'; //75% of the screen
//height do not work on Mozilla Firefox (today!)

【讨论】：

【解决方案5】：

试试这个

    $(".fancyboxiframe").fancybox({
        fitToView:false,
        autoSize:false,
        'width':parseInt($(window).width() * 0.7),
        'height':parseInt($(window).height() * 0.55),
        'autoScale':true,
        'type': 'iframe'
    });

【讨论】：

【解决方案6】：

这在过去对我有用。我必须同时设置高度和宽度。

 $(document).ready(function() {         
    $("a.iframe").fancybox({
                    'autoDimensions'    : false,
                    'width'             : 600,
                    'height'            : 150,
                    'transitionIn'      : 'elastic',
                    'transitionOut'     : 'elastic',
                    'type'              : 'iframe'

                });
    });

【讨论】：

是的。更新到最新版本的 Fancybox 1.3.4。我刚刚用 jquery-1.5.2.min.js 检查了这段代码，它可以工作。确保您运行的是最新的 jquery 和 fancybox。

【解决方案7】：

尝试使用：

'maxHeight' : 380,

【讨论】：