【问题标题】:AngularUI Modal - Preventing both body shift and scrollingAngularUI Modal - 防止身体移位和滚动
【发布时间】: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 触发,尽管我不确定。

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

【问题讨论】:

    标签: jquery angularjs twitter-bootstrap angular-ui


    【解决方案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。对我来说,可滚动背景的问题是用户滚动到模式的末尾然后让背景开始滚动,这非常令人不安,即行为是意外的。
    • 仅供参考,如果您仍然遇到滚动背景问题,这似乎是一种解决方法:stackoverflow.com/questions/20563681/…
    猜你喜欢
    • 2017-02-28
    • 1970-01-01
    • 2021-07-29
    • 2015-01-13
    • 1970-01-01
    • 2014-09-20
    • 2014-02-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多