Javascript 调整 Fancybox iframe 叠加宽度和高度的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6048216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problem adjusting Fancybox iframe overlay width and height
提问by Michael
I'm using Fancybox to create an overlay with an iframe everything works but I can't seem to change the values of the width/height. I'm using fancybox-1.2.6 and jquery1.2.6
我正在使用 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'
});
});
and
和
<a class="iframe" id="iframe" title="Sample title" href="http://google.com/">iframe</a>
回答by xyzzy.rad
Here's how to manually open an iframe in a fixed sized fancybox
这是在固定大小的fancybox中手动打开iframe的方法
$.fancybox.open({
'href': 'mypage.html',
'type': 'iframe',
'autoSize': false,
'width': 800,
'height': 800
});
回答by Mertis
you have to directly change the css of it since fancybox isnt actually part of jquery.
您必须直接更改它的 css，因为fancybox 实际上不是 jquery 的一部分。
$("#fancybox").css({'width': '500px', 'height': '500px'});
there is that way or something like this,
有那种方式或类似的东西，
jQuery(document).ready(function() {
$.fancybox(
{
'autoDimensions' : false,
'width' : 350,
'height' : 'auto',
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});
回答by JAY
I solved this problem by adding a width and a height attribute to the link tag like this:
我通过向链接标签添加宽度和高度属性来解决这个问题，如下所示：
<a id="various3" href="action.html" width="60%" height="60%">Iframe</a>
And you fancybox code:
而你的花哨代码：
$("#popup").fancybox({
'autoScale' : false,
'width' : $("a#popup").attr("width"),
'height' : $("a#popup").attr("height"),
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
回答by JAY
Please do not use Firefox. It doesn't work, they did not make height compatible, try chrome instead! (latest Firefox today!) if it is a supportable browser, remove the quotes for px, put quotes for %, like:
请不要使用火狐浏览器。它不起作用，他们没有使高度兼容，请尝试使用 chrome ！（今天是最新的 Firefox！）如果它是可支持的浏览器，请删除 px 的引号，添加 % 的引号，例如：
'width': 400; //400 pixels;
'width': '75%'; //75% of the screen
//height do not work on Mozilla Firefox (today!)
回答by Yuhang Zhu
just try this
试试这个
$(".fancyboxiframe").fancybox({
fitToView:false,
autoSize:false,
'width':parseInt($(window).width() * 0.7),
'height':parseInt($(window).height() * 0.55),
'autoScale':true,
'type': 'iframe'
});
回答by Jason Small
This has worked for me in the past. I had to set both the height and the width.
这在过去对我有用。我必须同时设置高度和宽度。
$(document).ready(function() {
$("a.iframe").fancybox({
'autoDimensions' : false,
'width' : 600,
'height' : 150,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
回答by jok3r
try to use:
尝试使用：
'maxHeight' : 380,
