1

我正在使用 2.1.5 版的fancyBox插件在弹出窗口中显示 Youtube 视频 - 类似于 jQuery 灯箱插件的功能，仅适用于视频媒体。

这在 IE、Firefox 和 Opera 中完美运行，但是在针对 Chrome 进行测试时，视频可以很好地加载到叠加层中，但是它允许您在页面上下滚动 iframe，叠加层似乎也没有覆盖整个高度这页纸。下面包含一个屏幕截图来演示：

在此处输入图像描述

如您所见，覆盖并没有覆盖整个页面，并且允许 iframe 垂直滚动。这在其他浏览器中不是问题，并且似乎只是 chrome 的问题。有没有人遇到过这个？

我的 JS+ 包含如下：

<script type="text/javascript" src="/Js/jquery.fancybox.js"></script>
<script type="text/javascript" src="/Js/jquery.fancybox-media.js"></script>
<link href="/Css/fancy.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {
        $('.fancybox-media').fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            helpers: {
              media: {}
            }
        });
    });
</script>

和标记：

<a class="fancybox-media" href="http://youtu.be/Ut7Hrc26TAI">
    <img src="/Images/laptop-find-out-more.png" alt="Find out more" />
</a>

我正在使用 jQuery 版本1.8.2。我已经用较新版本的 jQuery 对此进行了测试，但无济于事。

如何防止这种滚动行为并确保覆盖覆盖整个 chrome 页面？

4

1 回答 1

0

最终不得不挂钩afterShown和afterClose回调并手动禁用滚动，因为似乎没有官方修复此问题。

<script type="text/javascript">
    $(document).ready(function () {
        $('.fancybox-media').fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            afterShow: shown,
            afterClose: closed,
            helpers: {
                media: {}
            }
        });
    });

    function shown() {
        $('html, body').css({
            'overflow': 'hidden',
            'height': '100%'
        });
    }

    function closed() {
        $('html, body').css({
            'overflow': 'auto',
            'height': 'auto'
        });
    }
</script>

希望这可以帮助处于相同情况的其他人。

于 2013-08-21T09:36:06.517 回答