How to prevent scrolling of the body content when bootstrap modal is open

user_1010331 0
Viewed 61698

I am using Angular UI Bootstrap Modal box. When the modal opens the body has a scroll. When I scroll the content behind the modal also scrolls.

I can set overflow: hidden to the body tag and this solves the issue. However if I have alot of content within my modal I need a scroll to show. This scroll should not be inside the modal i.e When I use the page scroll the modal should only scroll and not the content. Plunker here

angular-ui twitter-bootstrap angularjs
8 Answers

I fixed this problem, with adding this code in global style:

.modal-open .modal {
  overflow: hidden;
}

.modal-open{
  height: 100vh;
}

you can do this, and you haven't scroll on modal open.

user_43374240
Related