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>

点击＆＃34; NEXT＆＃34;按钮，＃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

上的bootstrap示例

ps：总是缩进代码..减少标记错误很有用！

Answer 2

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

不支持重叠模式

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

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

Answer 3

解决方案：

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

模态窗口滚动

3 个答案: