javascript - 模态窗口滚动

Question

我有模态窗口(bootstrap 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:添加了 jsfiddle:http://jsfiddle.net/386ozdb7/2/

Answer 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:始终缩进您的代码。这有助于减少标记错误!