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

Posted 2023-02-19

【中文标题】引导模式打开时如何防止滚动正文内容

【英文标题】：How to prevent scrolling of the body content when bootstrap modal is open

【发布时间】：2014-01-01 01:19:41

【问题描述】：

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

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

【参考方案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 上表现良好。

【讨论】：

请注意，如果您想在模态之前/之后保持当前滚动位置，使用此解决方案，用户将始终自动滚动到顶部，这是我永远不会想要的

【参考方案2】：

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

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

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

【讨论】：

谢谢马丁。我还想出了另一种方法，使用$scope.$watch('show', function() <!-- code to add class to the body element-->

如果 .ovh 没有由 Bootstrap 或您使用的库定义，那么您可以将其添加到您的 CSS：body.ovh overflow: hidden; 。在 body 上切换此类将切换可滚动性。

【参考方案3】：

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

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

【参考方案4】：

我只是把 CSS 放在下面，现在每当打开模式弹出窗口时，身体滚动就会隐藏起来。我正在使用 Angular UI Bootstrap。

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

【参考方案5】：

添加overflow:hidden时，后台页面滚动隐藏。但是，模态滚动将在页面滚动时可见，并且模态将设置为滚动。

body.modal-open 
    overflow: hidden;

【参考方案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()

【参考方案7】：

对我来说，关闭对话框时页面会滚动，因此我修复了 ui-bootstrap-tpls.js 文件。实际的问题是，当关闭模式时，removeModalWindow 被调用，参数为 'modalInstance' 和 'modalWindow.value.modalOpener'。

第二个参数用于关注触发模态窗口的元素。只要去掉'dismiss'和'close function'中的第二个参数，你的页面滚动效果就解决了。

'removeModalWindow(modalInstance, modalWindow.value.modalOpener)' 变成'removeModalWindow(modalInstance)'

【参考方案8】：

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

.modal-open .modal 
  overflow: hidden;


.modal-open
  height: 100vh;

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