如何讓此Modal可滾動？

嗨，我一直在努力如何使這種模式可滾動。我已經嘗試了所有寫在那裏的類似於我的問題的東西。我希望它包含我希望用戶滾動瀏覽的條款和條件。如何讓此Modal可滾動？

  <div id="modal-container"> 
       <div class="modal-background"> 
        <div class="modal" style="overflow:scroll;"> 
         <div class="termsandconditions"> 

         <h3>Terms of Use</h3> 
         <p>By subscribing you are willing to...</p> 
         <p>...</p> 

         </div> 
        </div> 
       </div> 
      </div>

這是確切的代碼https://jsfiddle.net/hghazni/jxy3fx0x/1/

這是真人版，如果你想看看整個事情（這是在「留下評論」部分）一旦你點擊的條款和條件鏈接。

http://bodyondemand.co.uk

我很感激在製作模式滾動任何幫助！

來源

2017-06-20 Harry

小提琴有一堆問題，包括沒有按鈕來觸發模態。如果您需要幫助，請獲取該工作或在此處提供一個MCVE https://stackoverflow.com/help/mcve。 – mjw

你能告訴我們你如何實現你的滾動功能嗎？如果沒有錯誤，問題在於滾動功能。 –

問題是，有太多的依賴關係，開始把一個工作模式在JS小提琴（我剛剛嘗試，即使所有的代碼）。現場版可能是最好的方式來看待一切。此外，我目前還沒有實現滾動功能。我試圖添加溢出：滾動;到.termsandconditions div通過設置一個確切的高度和寬度超過父模式，但沒有奏效。 – Harry

要滾動內容，您需要爲<div class="modal">元素設置高度。你已經設置overflow:scroll這是不夠的，

這裏有您需要更新的地方，

$('#modal-container').removeAttr('class').addClass(buttonId).find('.modal').height($(window).outerHeight(true));

你沒給我們適當的工作小提琴，它有一些問題，我做了基於假設工作。這裏的更新小提琴來測試，https://jsfiddle.net/jxy3fx0x/8/

來源

2017-06-20 14:37:22

感謝Muthu，它做到了這一點，不幸的是，因爲modal出現在index.html的覆蓋頁面上，所以很難適應jsfiddle。 – Harry

如何讓此Modal可滾動？

回答

相關問題