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

标签 jquery css fancybox

我有一个以像素为单位设置高度和宽度的 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 中的内容完全匹配,因此 --should-- 没有垂直或水平滚动条。

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

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

感谢任何帮助。

最佳答案

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

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

关于jquery - Fancybox 根据屏幕尺寸错误地改变高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23727973/

相关文章:

javascript - Jquery 选择器不工作 : Error: Syntax error, 无法识别的表达式:a[@href]

javascript - 使用 jquery 元素调用 fancybox

javascript - 如何根据另一个div触发一个div的onClick函数

javascript - iframe onclick 动画或切换

html - 框阴影未显示或 z-index

javascript - 根据值输出更改背景颜色

javascript - Fancybox 脚本不工作

jquery - 使用 Fancybox 自动播放嵌入的 Youtube 视频

javascript - leaflet geosearch - 从传单 map 容器外部搜索位置

javascript - 在 Meteor 中缩短收集字段以进入