首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何防止bootstrap模式打开时滚动正文内容

如何防止bootstrap模式打开时滚动正文内容
EN

Stack Overflow用户
提问于 2013-12-13 18:03:30
回答 7查看 59.2K关注 0票数 22

我正在使用Angular UI Bootstrap Modal box。当模式打开时,body会有一个滚动。当我滚动模式后面的内容时,也会滚动。

我可以将overflow: hidden设置为body标记,这样就解决了这个问题。但是,如果我有很多内容在我的模式,我需要一个卷轴来显示。这个滚动不应该在模式中,也就是说,当我使用页面滚动时,模式应该只滚动而不是内容。Plunker here

EN

回答 7

Stack Overflow用户

发布于 2015-02-26 01:34:01

对dreamhigh的回答做了一个小小的修改,包括为iOS设备添加position: fixed:

代码语言:javascript
复制
body.modal-open {
    position: fixed;
    overflow: hidden;
}

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

代码语言:javascript
复制
<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上表现良好。

票数 13
EN

Stack Overflow用户

发布于 2016-08-30 22:02:41

适用于那些使用Angular JS和UI Bootstrap的用户。这就是我让它工作的方法。我的情况有点不同。我有一个Modal,它工作正常,滚动效果很好。然后我在那个模式上有一个按钮,它会弹出另一个模式。一旦关闭了第二个模式,初始模式将不再滚动。这就是它所需要的:

代码语言:javascript
复制
.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}
票数 6
EN

Stack Overflow用户

发布于 2016-06-07 17:31:16

我只是把下面的CSS,现在身体滚动是隐藏的,每当模式弹出是打开。我使用的是Angular UI Bootstrap。

代码语言:javascript
复制
.modal-open {
  overflow: hidden !important;
  position: relative
}
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20563681

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档