Fancybox加载时从父窗口中删除滚动条

时间:2013-07-31 19:21:08

标签: css html5 twitter-bootstrap fancybox-2

我搜索过这个话题,我确信那里有一个解决方案,但我不是在寻找合适的东西......

我正在使用自定义版本的Twitter Bootstrap 2.x(流体响应),顶部和底部全宽固定导航栏和Fancybox 2.1.4

<meta name="viewport" content="width=device-width, initial-scale=1.0">

bootstrap.min.css

自举-responsive.min.css

Modernizr的-2.6.2-响应-1.1.0.min.js

jquery.fancybox-media.js?V = 1.0.5

jquery.fancybox.css?V = 2.1.4

jquery.fancybox.js?V = 2.1.4

无论如何,我的问题是在使用fancybox时发生的。我所有的fancybox内容都使用了iframe(即使没有iframe的内容似乎做同样的事情,但我想我会包含它)。

当您点击某个链接时,屏幕上会出现一个fancbox框,然后父窗口会生成一个滚动条(在fancybox后面)。它不会伤害任何东西,但它看起来很俗气。我正在制作HTML5内容以便放入自助服务终端,因此我不希望出现滚动条。

1 个答案:

答案 0 :(得分:0)

您只需要在点击链接时使用滚动条设置溢出:隐藏在div上。从来没有真正使用过jfiddle,但据说只是在fancybox css中骑过这个类就可以了。

将此内容放在您的一个自定义css文件中:

 .fancybox-lock .fancybox-overlay { overflow:hidden; }

确保在加载fancybox css之后加载自定义css ,以使其优先。

请注意这一点,因为如果您覆盖的其中一张图片非常高(比当前窗口视图高),那么您将无法看到整个图像。

如果这是一个紧迫的问题,您可以根据窗口的高度使用一些javascript调整图像大小。