javascript - 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>

Demo.

如何防止背景滚动？

Answer 1

只需添加

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

到你的 CSS。

Updated Fiddle