Extra scrollbar on modal of Bootstrap 3

Question

I have looked through various questions on this site and other sites and tried their respective fixes but I haven't got any of them working for me. Whenever I open up my modal, an extra scrollbar is added. The extra scrollbar is of the modal, I know that, what I want to do is to hide the background-page's scrollbar so that it could prevent the background from scrolling. Right now, when the scroll of the modal is finished the background starts to scroll.

This is my modal's code:

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

How could I prevent the background from scrolling?

Answer 1

Just add

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

to your CSS.

Updated Fiddle