Fancybox根据屏幕尺寸错误地改变高度

时间:2014-05-18 23:48:24

标签: jquery css fancybox

我有一个高度和宽度设置为像素的花式框。代码是:

$("#join").fancybox({
    overlayOpacity      : 0.8, // Set opacity to 0.8
    overlayColor        : "#000000", // Set color to Black
    padding         : 0,
    'width'         : 305,
    'height'        : 677,
    'transitionIn'      : 'elastic',
    'transitionOut'     : 'elastic',
    'type'          : 'iframe',
});

fancybox的高度和宽度与fancybox内的内容完全匹配,因此 - 应该 - 不是垂直或水平滚动条。

当我在台式电脑上打开fancybox时,一切都很好 - 没有滚动条。但是,当我在笔记本电脑上打开fancybox(屏幕尺寸较小)时,fancybox有一个垂直滚动条,要求我向下滚动以查看其他的fancybox内容。宽度很好 - 没有水平滚动条出现。即使高度设置为677px,它在我的笔记本电脑上似乎显得更小。

要查看实际发生的情况,请访问www.mytrailapp.com并单击加入按钮(右上角)。 fancybox弹出窗口应该没有滚动条,但我的笔记本电脑上似乎有一个垂直滚动条。

任何帮助表示感谢。

2 个答案:

答案 0 :(得分:1)

将行autoScale: false,添加到jQuery代码中:

$("#join").fancybox({
autoScale : false,
overlayOpacity      : 0.8, // Set opacity to 0.8
overlayColor        : "#000000", // Set color to Black
padding         : 0,
'width'         : 305,
'height'        : 677,
'transitionIn'      : 'elastic',
'transitionOut'     : 'elastic',
'type'          : 'iframe',
});

我认为如果屏幕比内容短,那就是你想要的行为。

答案 1 :(得分:0)

如果使用fancybox v1.3.4将autoScale设置为false

$("#join").fancybox({
    autoScale: false, 
    // your other API options
});

如果使用fancybox v2.x将fitToView设置为false

$("#join").fancybox({
    fitToView : false,
    // your other API options
});