背後的fancybox

Question

停止滾動我有這樣的網站： 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> 

感謝。

Answer 1

這個Scrolling only the distance of a modal on smaller screens with media queries

類似的問題，我給出的答案是這樣的。 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 : Detect user's scroll attempt without any window overflow to scroll to

Answer 2

您需要將overlaylocked選項true設置像

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

入住這JSFIDDLE