模态窗口滚动答案

【问题标题】：Modal window scrolling模态窗口滚动
【发布时间】：2015-05-21 08:36:36
【问题描述】：

我有模态窗口（引导程序 3）：

<div class="modal fade" id="modal1">            
<div class="modal-dialog">                    
    <div class="modal-content">
        <div class="modal-header">
            TITLE
        </div>
        <div class="modal-body">
            TEXT
        </div>
        <div class="modal-footer">
            <form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
        </div>
    </div>
</div>

点击“NEXT”按钮，#modal1 关闭，#modal2 打开：

<div class="modal fade" id="modal2">            
<div class="modal-dialog">                    
    <div class="modal-content">
        <div class="modal-header">
            TITLE
        </div>
        <div class="modal-body">
            TEXT //lots of text
        </div>
        <div class="modal-footer">
            <form><input class="btn btn-success" type="button" value="EXIT" data-dismiss="modal"/></form>
        </div>
    </div>
</div>

在第一个模态窗口#modal1 中滚动工作正常，但在#modal2 中它不起作用，甚至没有滚动条。 那么，问题来了：如何在第二个窗口中进行滚动？

UPD：添加了 jsfiddle：http://jsfiddle.net/386ozdb7/2/

【问题讨论】：

已添加，查看 UPD
由于您不使用除 bootstrap 和 jquery 之外的任何脚本，这可能是 bootstrap 中的错误，而不是您的代码中的错误。
pstenstrm，反正我也想解决

标签： javascript css twitter-bootstrap-3

【解决方案1】：

如果您正确缩进您的代码，您可以看到带有“modal-footer”类的 div 不在文档建议的带有“modal-content”的 div 内。也许这可能是滚动条有很多文本的问题

<div class="modal fade" id="modal1">            
    <div class="modal-dialog">                    
        <div class="modal-content">
            <div class="modal-header">
                TITLE
            </div>
            <div class="modal-body">
                TEXT
            </div>
        </div>
    <div class="modal-footer">
        <form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
    </div>
</div>

尝试如下更改您的 2 个模态：

<div class="modal fade" id="modal1">            
    <div class="modal-dialog">                    
        <div class="modal-content">
           <div class="modal-header">
                TITLE
            </div>
            <div class="modal-body">
                TEXT
            </div>
            <div class="modal-footer">
                <form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
            </div>
        </div>
    </div>
</div>

检查引导示例：http://getbootstrap.com/javascript/#modals

ps：总是缩进你的代码。这对减少标记错误很有用！

【讨论】：

不，我刚刚更新了 jsfiddle，现在是问题所在。我认为，样式之间存在一些冲突，但我不知道如何解决它

【解决方案2】：

这就是问题所在：http://getbootstrap.com/javascript/#overlapping-modals-not-supported

不支持重叠模态

请确保不要在另一个模式仍然可见时打开模式。一次显示多个模式需要自定义代码。

这可能会对您有所帮助：https://github.com/jschr/bootstrap-modal

【讨论】：

我在打开#modal2之前关闭了#modal1，所以应该不是问题
关闭 modal1 和打开 modal2 发生在同一个事件中，所以我认为这就是问题
有没有办法分离这些操作，但用户看不到？

【解决方案3】：

解决方法：

.modal {
      overflow-y: auto;
    }
    .modal-open {
      overflow: auto;
    }

【讨论】：

这太少了。 OP应该在哪里添加这个？这有什么帮助？
只要您阅读问题并花时间理解问题和答案，您是否也可以花时间解释为什么这是解决方案？这对人们的帮助远不止是一段枯燥的 CSS 代码。