如何让此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

我很感激在制作模式滚动任何帮助！

小提琴有一堆问题，包括没有按钮来触发模态。如果您需要帮助，请获取该工作或在此处提供一个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/

感谢Muthu，它做到了这一点，不幸的是，因为modal出现在index.html的覆盖页面上，所以很难适应jsfiddle。 – Harry

如何让此Modal可滚动？

相关推荐