angularjs - Bootstrap 模式打开时如何防止滚动正文内容

Question

我正在使用 Angular UI Bootstrap Modal box .当模态打开时，主体有一个滚动。当我滚动模态后面的内容时，也会滚动。

我可以设置溢出:隐藏到正文标签，这解决了这个问题。但是，如果我的模态中有很多内容，我需要滚动显示。此滚动不应该在模式内，即当我使用页面滚动时，模式应该只滚动而不是内容。 Plunker here

Answer 1

对dreamhigh的回答稍作修改，对我来说效果很好，包括添加 position: fixed for iOS devices:

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

此外，调整视口(viewport)以禁用用户缩放，以防止输入自动缩放并在正文内容上引入滚动条:

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

归功于这篇文章:
Bootstrap 3: horizontal scrollbar on iPhone after form focus

通过这两个更改，我能够让 angularjs 模态表单在 iOS 上表现良好。