0

我有这个网站： http ://thc-cup.ucoz.com/

我使用 fancybox 在其中添加登录/联系我们表单，而无需为此转到另一个页面。但是...在您单击它们并显示之后，如果您滚动，您会看到后面的页面也在滚动，这很烦人。

当fancybox处于活动状态时，如何强制它停止滚动？

编辑

网站代码： *联系表格：

<div id="-cu" style="display: none;">$MFORM_1$</div>

*对于启动fancybox的链接：

 <li><a class="fancybox" href="#-cu">Contact Us</a></li>

谢谢。

4

2 回答 2

1

您需要将overlay locked选项设置为true喜欢

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : true // false (page scrolls behind fancybox)
        }
    }
});

检查这个JSFIDDLE

于 2013-11-09T19:05:12.773 回答
1

与此类似的问题在带有媒体查询的较小屏幕上仅滚动模态的距离

我给出的答案是这样的。http://jsfiddle.net/mgGS7/1/

小提琴将您的网页放在一个 div 中。所以页眉、内容和页脚都在一个 div 中。这将使解决方案变得容易得多。

<div class = "popup">
    <div class = "over"></div>
    <div class = "window">
        <button class = "close">Close</button>
    </div>
</div>

<div class = "content">
    <p>Filler</p>
    <button class = "pop">Popup</button>
    <p>Filler</p>
    <p>Filler</p>
    <button class = "pop">Popup</button>
    <p>Filler</p>
</div>

var scroll;

$('.pop').click (function () {
    scroll = $(document).scrollTop ();
    $('.popup').show ();
    $('.content').offset ({top:-scroll}).addClass ('paused');
});

$('.close').click (function () {
    $('.popup').hide ();
    $('.content').removeClass ('paused').removeAttr ('style');
    $(document).scrollTop (scroll);
});

您的网页将在里面.content。本质上，当您单击弹出窗口时，网页的滚动被保存并固定在该位置，因此无法移动。一旦弹出窗口消失，它就不再固定并且它的滚动位置被恢复。

这是一种方法。另一种方法是侦听鼠标滚轮事件并在那里执行某种逻辑之类的e.preventDefault ()事情。这是监听鼠标滚轮事件的链接。JQuery / JS：检测用户的滚动尝试，没有任何窗口溢出滚动到

于 2013-11-09T13:46:05.280 回答