CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Extra scrollbar on modal of Bootstrap 3

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?

Upvotes: 1

Views: 502

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

Just add

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

to your CSS.

Updated Fiddle

Upvotes: 1

Related Questions