Javascript 模式窗口滚动

我有模态窗口引导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>

单击下一步按钮，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:added jsfiddle:

如果您正确缩进代码，您可以看到带有类modal footer的div不在文档建议的带有modal内容的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>

检查以下位置的引导示例：

注意：总是缩进你的代码。。这有助于减少标记错误

这就是问题所在：

不支持重叠模态

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

这可能会帮助您：

解决方案：

---

另外，请注意UPD，因为除了包含引导和jquery之外，您不使用任何脚本。这可能是引导中的一个错误，而不是代码中的错误。pstenstrm，无论如何，我想解决它不，我刚刚更新了JSFIDLE，现在是问题所在。我认为，风格之间存在一些冲突，但我不知道如何解决。我在打开modal2之前关闭modal1，所以问题不应该是关闭modal1和打开modal2发生在同一事件中，所以我认为这就是问题。有没有办法将这些动作分开，但用户看不到？这很简单。OP应该在哪里添加这个？这将有什么帮助？只要你阅读问题并花时间理解问题和答案，你是否也能花时间解释为什么这是解决方案？这对人们的帮助远不止一段枯燥的CSS代码。

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