如何使这个 Modal 可滚动？答案

【问题标题】：How to make this Modal scrollable?如何使这个 Modal 可滚动？
【发布时间】：2017-11-23 03:23:57
【问题描述】：

您好，我一直在努力研究如何使这种模式可滚动。我已经尝试了与我的问题类似的所有内容。我希望它包含我希望用户滚动浏览的条款和条件。

            <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

感谢它在使模式可滚动方面的任何帮助！

【问题讨论】：

Fiddle 有很多问题，包括没有触发模式的按钮。如果您需要帮助，请在此处stackoverflow.com/help/mcve 获取该功能或提供 MCVE。
你能告诉我们你是如何实现你的滚动功能的吗？如果没记错的话，问题出在滚动功能上。
问题是有太多的依赖项开始在 JS fiddle 中放置一个工作模式（我刚刚尝试了所有代码）。实时版本可能是查看所有内容的最佳方式。另外我目前还没有实现滚动功能。我试图添加溢出：滚动；通过在父模态上设置精确的高度和宽度，到 .termsandconditions div，但这不起作用。

标签： jquery sass modal-dialog scrollable

【解决方案1】：

要滚动内容，您需要为<div class="modal"> 元素设置高度。你已经设置了overflow:scroll 这还不够，

这里是你需要更新的地方，

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

你没有给我们正确的工作小提琴，它有一些问题，我是根据假设让它工作的。这是要测试的更新小提琴，https://jsfiddle.net/jxy3fx0x/8/

【讨论】：

感谢 Muthu，这成功了，不幸的是，由于模态出现在 index.html 上的覆盖页面中，因此很难融入 jsfiddle。