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

Question

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

Answer 1

A slight modification of dreamhigh's answer which worked well for me included adding position: fixed for iOS devices:

body.modal-open {
    position: fixed;
    overflow: hidden;
}

Furthermore adjusting the viewport to disable user scaling to keep inputs from automatically zooming and introducing scroll bars on the body content:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Credit to this post: Bootstrap 3: horizontal scrollbar on iPhone after form focus

With these two changes I was able to get angularjs modal forms to behave well on iOS.