如何修复第二个 bootstrap 模式丢失垂直滚动条

Question

在 bootstrap 3 - 如果您打开一个模式，然后在打开第二个模式之前将其隐藏，则垂直滚动条会在第二个模式上消失。有人对如何解决这个问题有任何想法吗？

<a data-toggle="modal" href="#Modal1" class="btn btn-info">Open Modal 1</a>

<div id="Modal1" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modal-label">Modal 1</h4>
            </div>
        <div class="modal-body">
            <p><a href="#" id="btn2" class="btn btn-info">Open Modal 2</a></p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
        </div>
    </div> <!--modal-content-->
</div> <!--modal-dialog-->

<div id="Modal2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modal-label">Modal 2</h4>
            </div>
        <div class="modal-body">
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
        </div>
    </div> <!--modal-content-->
</div> <!--modal-dialog-->

<script>
$(document).on("click", "#btn2", function (e) {
            e.preventDefault();
            //$('.modal.in').modal('hide')
            $('#Modal1').modal('hide');
            $('#Modal2').modal('show');
});
</script>

Answer 1

而不是这个

 $('#Modal1').modal('hide');
 $('#Modal2').modal('show');

使用

 $('#Modal1').modal("hide");
 $('#Modal2').modal("show");

就是这样....

更新

<div id="Modal2" class="modal fade" style="overflow:scroll">

Answer 2

我有一个 css 解决方案。使用下面的 css。

#Modal2{
    overflow-y:auto;
}

Answer 3

我最终通过覆盖 css:

来修复它

.modal {
   overflow: auto;
}

工作fiddle：http://jsfiddle.net/qfvnmbfd/2/

如何修复第二个 bootstrap 模式丢失垂直滚动条

How to fix 2nd bootstrap modal loosing vertical scrollbars

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3