打开引导程序模式时如何防止滚动正文内容

Question

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

我可以设置overflow:隐藏到body标签,这解决了问题.但是如果我的模态中有很多内容,我需要一个滚动来显示.这个卷轴不应该在模态内部,即当我使用页面滚动时,模态应该只滚动而不是内容. 这里的人物

Answer 1

略微修改dreamhigh的答案对我来说很有效包括添加位置:固定的iOS设备:

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

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

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

感谢这篇文章: Bootstrap 3:表格焦点后iPhone上的水平滚动条

通过这两个更改,我能够获得angularjs模态表单在iOS上表现良好.

Answer 2

我实际上面临着同样的问题,使用UI Bootstrap,并提出了一种解决方法.在打开模态时,.ovh向主体添加一个class(),将overflow设置为hidden.在关闭/取消模态时,您将删除该类,以便再次滚动.

请看我的小提琴:http : //plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

请注意,我已将该类放在index.html中,仅用于演示目的.除了我$document在控制器定义中注入,使用由角度提供的参考.

Answer 3

对于那些使用Angular JS和UI Bootstrap的人.以下是让我开始工作的原因.我的情况有点不同.我有一个工作和滚动很好的模态.然后,我在该模态上有一个按钮,可以弹出另一个模态.一旦第二个模态关闭,初始模态将不再滚动.这就是全部:

.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}