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

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.

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

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

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

7 个解决方案

#1

I'm facing the very same problem actually, using UI Bootstrap, and came up with kind of a workaround. On opening the modal, you add a class (.ovh) to the body, that sets overflow to hidden. On closing/dismissing the modal, you remove that class, so that scrolling is possible again.

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

See my fork of your fiddle here: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

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

Note that I've placed the class in the index.html, just for demonstration purposes. Besides I injected $document in the controller definition, to use the reference provided by angular.

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

#2

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

对dreamhigh的回答略有修改，对我来说效果很好，包括添加位置：固定用于iOS设备：

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

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

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

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

#3

For those using Angular JS and the UI Bootstrap. Here is what it took for me to get it to work. My situation was a bit different. I had a Modal that worked and scrolled great. I then had a button on that modal that would pop another modal. Once that second modal was closed, the initial modal would no longer scroll. This is all it took:

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

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

#4

I just put below CSS and now the body scroll is hidden whenever modal popup is opened. I am using Angular UI Bootstrap.

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

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

#5

When you add overflow:hidden, the background page scroll is hidden. However, the modal scroll will be visible as the page scroll and the modal will be set to scroll.

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

body.modal-open {
    overflow: hidden;
}

#6

In bootstrap js commmented line causes the problem, you can comment this line as i do.

在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()

#7

For me the page scrolled when the dialog was being closed, so I fixed the ui-bootstrap-tpls.js file. The actual problem is that when dismissing the modal, removeModalWindow is being called with parameters 'modalInstance' and 'modalWindow.value.modalOpener'.

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

The second parameter is being used to focus on the element which triggered the modal window. Just remove the second parameter in the 'dismiss' and 'close function' and your page scroll effect will be solved.

第二个参数用于关注触发模态窗口的元素。只需删除'dismiss'和'close function'中的第二个参数，您的页面滚动效果就会得到解决。

'removeModalWindow(modalInstance, modalWindow.value.modalOpener)' becomes 'removeModalWindow(modalInstance)'

'removeModalWindow（modalInstance，modalWindow.value.modalOpener）'成为'removeModalWindow（modalInstance）'

#1