如何在顶部显示引导/角度UI警报？

Question

我正在使用angular-UI显示一些警报，这些警报基本上由bootstrap提供。但问题是，如果客户端导航到页面底部，则无法看到警报。我想知道如何在顶部显示警报（我认为正确的术语是“在固定位置上”）

Answer 1

您希望它如何运作？使用PNotify或AngularJS-Toaster (plnkr)等库可能最简单。

如果您想自己动手，可以将它们放在特殊区域。对于类似这样的内容，您可以将警报放在position:fixed（plnkr）的div中：

<div style="position: fixed; top: 0; right: 0">
  <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
      {{alert.msg}}
  </alert>
</div>

Answer 2

如果你想将它“固定”到屏幕上，你应该使用position:fixed添加或覆盖警报样式。 使用其他属性left和top进行相对于视口的定位。

Answer 3

有各种css位置属性可以帮助您。

.class_of_your_alerts {
    position: absolute; /* position: absolute rather than position: fixed 
                           because you will be declaring left, right, top, etc. */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; /* now it covers the whole browser window because all absolute
                  positioning properties are set to 0. Tweak to your liking
                  using px or percentage */

    z-index: 105; /* optional - if your application has a lot of layers that are 
                     already absolutely positioned, you may wish to up the z-index
                     which is essentially the element stacking order for the current
                     dom node */
}