Bootstrap 3模态上的额外滚动条

Question

我已经浏览了该网站和其他网站上的各种问题，并尝试了各自的修复程序，但我没有任何一个为我工作。 每当我打开模态时，都会添加一个额外的滚动条。 我知道，额外的滚动条是模式的，我想做的是隐藏背景页面的滚动条，以防止背景滚动。 现在，当模态的滚动完成时，背景开始滚动。

这是我的模态代码：

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalTitle">Modal title</h4>

            </div>
            <div class="modal-body">
                <p id="myModalContent"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-thumbs-up"></span>

                </button>
                <button type="button" class="btn btn-default center"> <span class="glyphicon glyphicon-thumbs-down"></span>

                </button>
            </div>
        </div>
    </div>
</div>

演示。

如何防止背景滚动？

Answer 1

只需添加

body.modal-open {
    overflow: hidden!important;
}

到您的CSS。

更新的小提琴