如何使模態彈出窗口與頁面滾動其內容？

我有一個模式彈出窗口，當它加載高於瀏覽器高度的內容時，我無法向下滾動查看其餘的信息。相反，背景可以滾動，但彈出不會。如何使模態彈出窗口與頁面滾動其內容？

相反，我想讓彈出窗口保持放置狀態，當用戶向上或向下滾動時，將彈出窗口留在原地並讓它們滾動到內容的底部。如果你在Facebook上創建一個超長的帖子，彈出窗口可以正常工作，並且我想知道如何通過此控件獲得相同的效果。

來源

2009-12-12 Middletone

將樣式overflow: auto放在容器塊上。

來源

2009-12-12 18:49:54

當你說容器塊什麼你指什麼？你也有實際測試過這個嗎？將兩頁內容放入通過模式彈出窗口彈出的面板中，並且面板上沒有滾動條，您可以通過滾動頁面查看所有內容？ – Middletone 2009-12-12 19:33:30

我在問，因爲你的建議不起作用，當我嘗試它。我知道我可以滾動div和麪板，但這不是我所問的。 – Middletone 2009-12-12 19:34:01

在您的模態彈出窗口的css中，設置modalpop的寬度，然後設置overflow:auto。這會給你水平滾動條。例如：

.ModalPopupPanel 
{ 
    width:900px; 
    overflow:auto; 
}

所以，當內容寬度超過900px，水平滾動條會顯示出來。對於需要設置modalpop高度的垂直滾動條也是如此。

來源

2010-02-05 03:20:02

這可以解決問題，如果瀏覽器屏幕至少900px。要獲得可以跨越以填充該頁面的彈出窗口的解決方案，請參閱我的答案。 – DavRob60 2010-05-09 16:17:18

此腳本將彈出高度設置爲屏幕高度的90％，然後您可以設置溢出：auto;

<script type="text/javascript"> 
    function pageLoad() { 
     $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px"; 
    } 
    </script>

這裏有一個相關的問題，我問和我找到的解決方案。

asp.net ModalPopupExtender : need to show scroll bar when overflow

來源

2010-05-09 16:20:08 DavRob60

您可以將類添加到body標籤時，彈出的是打開隱藏滾動條，並刪除它時彈出消失了，那麼你的背景應該是位置：固定和高度應window.height（）（用JS動態獲取它），並且也是溢出：auto。

所有這一切會發生，如果彈出窗口高於背景，右側會出現一個漂亮的滾動條，並且由於隱藏了您的身體滾動條，您只會看到那一個。另外，頁面本身不滾動。 Facebook就是這樣用他們的圖片瀏覽器。

來源

2011-12-05 19:00:43 Mariano

你可以嘗試一下本作，其含量研究滾動modalpopup：設置PopupDragHandleControlID它指向一個空的面板，組重新定位模式=「無」，這將讓固定在同一位置，你滾動頁面的模式。

來源

2012-11-08 11:15:56

-1

這裏簡單而最好的工作液

該類添加到您的模式彈出頁面。

body.modal-open { 
 
overflow: auto; 
 
}

來源

2015-12-20 13:12:20

如何使模態彈出窗口與頁面滾動其內容？

回答

相關問題