Question

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

我可以设置overflow：hidden到body标签，这解决了问题。但是如果我的模态中有很多内容，我需要一个滚动来显示。这个卷轴不应该在模态内，即当我使用页面滚动时，模态应该只滚动而不是内容。 Plunker here

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: horizontal scrollbar on iPhone after form focus

通过这两项更改，我能够获得angularjs模态表单，以便在iOS上表现良好。

Answer 2

我实际上面对同样的问题，使用UI Bootstrap，并提出了一种解决方法。在打开模态时，您向主体添加一个类（.ovh），将溢出设置为隐藏。在关闭/取消模态时，删除该类，以便再次滚动。

在这里查看我的小提琴：http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

注意我已将该课程放在index.html中，仅用于演示目的。除了在控制器定义中注入$document之外，还要使用angular提供的引用。

Answer 3

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

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

Answer 4

我只是放在CSS下面，现在只要打开模态弹出窗口就会隐藏正文滚动。我正在使用Angular UI Bootstrap。

.modal-open {
  overflow: hidden !important;
  position: relative
}

Answer 5

当您添加overflow：hidden时，隐藏背景页面滚动。但是，模态滚动将在页面滚动时可见，模态将设置为滚动。

body.modal-open {
    overflow: hidden;
}

Answer 6

在bootstrap中，js通信行会导致问题，您可以像我一样对此行进行注释。

  this.backdrop(function () {
  var transition = $.support.transition && that.$element.hasClass('fade')

  if (!that.$element.parent().length) {
    that.$element.appendTo(that.$body) // don't move modals dom position
  }

  that.$element
    .show()
    .scrollTop(0)

  if (that.options.backdrop) that.adjustBackdrop()
  that.adjustDialog()

  if (transition) {
    that.$element[0].offsetWidth // force reflow
  }

  that.$element
    .addClass('in')
    .attr('aria-hidden', false)

  //that.enforceFocus()

Answer 7

对我来说，当对话框关闭时页面滚动，所以我修复了ui-bootstrap-tpls.js文件。实际问题是，在解除模态时，使用参数＆＃39; modalInstance＆＃39;来调用removeModalWindow。和＆＃39; modalWindow.value.modalOpener＆＃39;。

第二个参数用于关注触发模态窗口的元素。只需删除＆＃39; dismiss＆＃39;中的第二个参数即可。和＆＃39;关闭功能＆＃39;并且您的页面滚动效果将被解决。

＆＃39; removeModalWindow（modalInstance，modalWindow.value.modalOpener）＆＃39;成为＆＃39; removeModalWindow（modalInstance）＆＃39;

Answer 8

我解决了这个问题，以全局样式添加了此代码：

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

.modal-open{
  height: 100vh;
}

你可以这样做，而且你还没有在模态打开时滚动。

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

8 个答案: