更改功能盒的大小 [英] change fancybox size
问题描述
我展示了带有fancybox的iframe.在iframe的HTML中，我这样做:
<body style="width: 650px; height: 430px;">
然后在JS中执行以下操作:
$(".popup").fancybox({
padding : 0,
closeBtn : false,
autoSize : true,
fitToView : false,
beforeShow: function()
{
this.width = ($("iframe").contents().find("body").width());
this.height = ($("iframe").contents().find("body").height());
}
});
其中".popup"是:
<a href="url.php" class="popup" data-fancybox-type="iframe">
如果在该iframe中加载了另一个具有不同尺寸(例如400x150)的HTML，fancybox会调整其高度，而不是宽度.
任何帮助将不胜感激！
编辑1 :
我第一次运行精美框时，.fancybox-inner" div的样式如下
width: 650px; height: 430px;
然后，当我在iframe中导航时，.fancybox-inner" div的样式将如下所示
width: 650px; height: 150px;
但是第二个HTML正文标签是这样的
<body style="width: 400px; height: 150px;">
此答案中链接的iframe-lightbox/"rel =" nofollow noreferrer>解决方案表示我仅适用于高度
好，我最终使用的是fancybox版本:2.1.4(2013年1月10日，星期四)
在1231行，您会找到
origHeight = body.height();
在那之后添加这个
origWidth = body.width();
该功能可以自动调整高度和
I show an iframe with fancybox. Inside the HTML of the iframe I do this:
<body style="width: 650px; height: 430px;">
Then in JS I do the followig:
$(".popup").fancybox({
padding : 0,
closeBtn : false,
autoSize : true,
fitToView : false,
beforeShow: function()
{
this.width = ($("iframe").contents().find("body").width());
this.height = ($("iframe").contents().find("body").height());
}
});
Where ".popup" is:
<a href="url.php" class="popup" data-fancybox-type="iframe">
If inside that iframe I load another HTML with different dimensions (let's say 400x150), fancybox adjust it's height but not it's width.
any help will be appreciated!
EDIT 1:
The first time I run fancy box, the ".fancybox-inner" div get styled like this
width: 650px; height: 430px;
Then, when I navigate inside the iframe, the ".fancybox-inner" div get styled like this
width: 650px; height: 150px;
but the second HTML body tag is like this
<body style="width: 400px; height: 150px;">
EDIT 2:
the comments from this solution linked in this answer, indicates me that this only works with the height
Ok, I ended up doing this using fancybox version: 2.1.4 (Thu, 10 Jan 2013)
at line 1231 you will find
origHeight = body.height();
After that add this
origWidth = body.width();
That auto adjust both height and with
这篇关于更改功能盒的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
