jQuery模式滾動頁面滾動條

當jQuery模式已經加載......你如何使頁面滾動條滾動模態而不是頁面？jQuery模式滾動頁面滾動條

看123reg ... https://www.123-reg.co.uk/order/domain?domain=somedomain.co.uk&is=1上的這個例子，然後點擊'.co.uk taken'然後滾動。

如果您然後關閉模式，然後單擊「.uk.com可用」模式更短，頁面滾動條被禁用，直到關閉模式。

任何人都可以舉例說明這是如何工作的？

在此先感謝！ :)

來源

2014-08-28 David G

告訴我們你有什麼試過 – 2014-08-28 09:58:37

我已經嘗試過任何atm，我只是看到了這一點，並想知道它是如何工作的。 – 2014-08-28 11:23:45

使用position:absolute，而不是position:fixed在主模式容器類

.modal_name {  
    position: absolute;   
}

來源

2014-08-28 09:37:35 Husen

不要這樣做 - 當你向下滾動頁面時，你的模態將滾動到窗口的頂部，這不是你想要的'.css（）'方法中缺少大括號'}的大括號 – DoubleA 2014-08-28 16:25:09

只是這種風格添加到您的樣式表，它應該工作：

.modal-open { 
    overflow: inherit; 
}

來源

2014-08-28 09:47:26

這是因爲「情態的發生-scrollable「類，它應用於模式彈出框的父div處。這個「模態滾動」類具有樣式「溢出：自動和溢出：Y軸滾動」。如果刪除這些樣式，頁面滾動條將不再存在，您將無法向下滾動模式彈出窗口。模態斑大於身高，所以溢流式在這裏工作。對於第二個彈出窗口，它不比身高高，因此不會在那裏滾動。 'overflow'樣式只適用於元素超出指定限制的地方（比如div的max-height：450px，當div中的內容超過450 px時，它會顯示滾動條件）溢出：自動或溢出：y-scroll被添加）。

您可以通過jQuery處理這些事情太多。只是讓你更好地理解我已經創建了兩個功能的ShowModal和HideModal： -

<div class="modal" id="popupModal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header ">     
       <button type="button" class="close1" data-dismiss="modal" aria-hidden="true">&times;</button> 
      </div> 
      <div class="modal-body"> 
       <p>Something to be written<p>   
     </div> 
    </div> 
</div>

腳本

function ShowModal() 
{ 
$("#popupModal").modal('show'); //this will show the page scroll bar for modal popup only . This is handled by bootstrap itself 
$('body').css({overflow:'hidden'); // this will hide the body scroll bar 
} 

function HideModal(){ 
$("#popupModal").modal('hide'); 
$('body').css({overflow:'auto'}); //this will show the scroll bar 
}

希望我的回答你的幫助！！

來源

2014-08-28 12:02:31

:) – DoubleA 2014-08-28 16:26:08

這只是一個打字錯誤...謝謝你的方式;） – 2014-08-29 06:47:34

jQuery模式滾動頁面滾動條

回答

相關問題