带有引导警报的Angularjs-向下滚动时将警报保持在屏幕上

Posted 2023-03-06

【中文标题】带有引导警报的Angularjs-向下滚动时将警报保持在屏幕上

【英文标题】：Angularjs with bootstrap alert - keep the alert on screen when scroll down

【发布时间】：2014-11-18 03:58:19

【问题描述】：

我使用的示例来自 http://angular-ui.github.io/bootstrap/

<div ng-controller="AlertDemoCtrl">
     <alert ng-repeat="alert in alerts" type="alert.type"
        close="closeAlert($index)alert.msg>    
    </alert>
    <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

当我向下滚动时，警报会从屏幕上消失。 当用户向下滚动时，如何将警报向下移动？

【问题讨论】：

与 JS 或 Angular 无关...这是一个 CSS 问题。您的提醒标签已打开。

看看github.com/jirikavi/AngularJS-Toaster，这是一个非常好的非阻塞通知解决方案

位置：固定 + CSS 中的 z-index

DeadCalimero，我建议您将其发布为 anwser，以便我可以将此解决方案标记为正确的 anwser。谢谢！

【参考方案1】：

我建议在您的警报中添加一个类。然后按照@DeadCalimero 的建议，添加以下css：

.alert-float 
  position: fixed,
  top: 10px,    // adjust if needed
  z-index: 1000 // or higher if needed

【参考方案2】：

使用引导类'附加'检查这个http://getbootstrap.com/javascript/#affix，