AngularUI Modal - 防止身体移位和滚动

Posted 2023-05-08

【中文标题】AngularUI Modal - 防止身体移位和滚动

【英文标题】：AngularUI Modal - Preventing both body shift and scrolling

【发布时间】：2014-02-18 03:06:39

【问题描述】：

我正在使用最新版本的 angularjs、angularui、jquery 和 bootstrap，但遇到了问题。使用 angularui 模态时，正文内容会左右移动。例如，这可以在 angularui 主页上看到。

我已阅读此问题 (https://github.com/twbs/bootstrap/issues/9855) 并尝试将此解决方案 (http://jsbin.com/oHiPIJi/8/edit) 扩展到 angularui 模态案例，但它似乎不起作用。恐怕我对 jquery 的了解非常有限/很少，但我怀疑 bs.modal 事件不会为 angularui 触发，尽管我不确定。

任何有关解决此问题的正确方向的指示将不胜感激！谢谢。

【参考方案1】：

以下内容可能会有所帮助：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style>
  .modal-open 
  overflow: auto;

</style>

在加载引导 css 后将类模式打开溢出覆盖为自动。 这里有一个 plunker 供您检查这是否是所需的结果：http://plnkr.co/edit/Jz6Pd08v7dkkdRUKg8FK?p=preview

您需要在新窗口中打开预览（右上角的蓝色 X）。 将窗口大小调整为不同的宽度，以查看它是否适用于存在滚动条。 在 Firefox 上测试了这个。其他浏览器可能会有不同的结果。

【讨论】：

非常感谢您的回答 mainguy。不幸的是，它并没有为我解决问题。我已经分叉了 plunker 来演示 (plnkr.co/edit/wZ7BSIIKBy850fR4Vxs0?p=preview)。它解决了内容移动问题，但引入了背景滚动（一旦滚动到模式底部）。这就是我在尝试解决此问题时所发现的 - 您可以摆脱使用 CSS 进行内容移动（例如上面）但具有滚动背景，或者停止滚动背景并进行内容移动。当然你可以解决这两个问题 - 可能使用 JS。

可滚动背景有什么不好？也许你应该试试 ng-dialog。我经常使用它，它比 bootstrap modal 更小更容易处理。与 bootstrap 3 完美配合。github.com/likeastore/ngDialog

谢谢 - 我会试试 ng-dialog。对我来说，可滚动背景的问题是用户滚动到模式的末尾然后让背景开始滚动，这非常令人不安，即行为是意外的。

仅供参考，如果您仍然遇到滚动背景问题，这似乎是一种解决方法：***.com/questions/20563681/…