1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>alertDemo</title>
6 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
7 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
8 <script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script>
9 <script type="text/javascript" src="app.js"></script>
10 <style type="text/css">
11
12 .alert-fixed {
13 width: 300px;
14 margin-left: -150px;
15 padding-top: 30px;
16 padding-bottom: 30px;
17 opacity: .9;
18 box-shadow: 0 2px 5px #A5A5A5;
19 z-index: 1060;
20 position: fixed;
21 left: 50%;
22 text-align: center;
23 }
24 </style>
25 </head>
26 <body data-ng-app="app">
27 <br/>
28 <br/>
29 <br/>
30 <br/>
31 <br/>
32 <div data-ng-controller="alertController" class="container">
33 <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="2000" class="alert-fixed">{{alert.msg}}</uib-alert>
34
35 <button type="button" class=‘btn btn-primary‘ ng-click="addAlert()">{{ typeSwitch }}</button>
36 </div>
37
38 </body>
39 </html>
1 var app = angular.module(‘app‘, [‘ui.bootstrap‘]);
2
3 app.controller(‘alertController‘, function($scope){
4 $scope.alerts = [
5 ];
6 $scope.typeSwitch = false;
7 $scope.addAlert = function() {
8 if (!$scope.typeSwitch) {
9 $scope.alerts.push({type: ‘success‘, msg: ‘开启关怀成功!‘});
10 $scope.typeSwitch = true;
11 } else {
12 $scope.alerts.push({type: ‘warning‘, msg: ‘关闭关怀成功!‘});
13 $scope.typeSwitch = false;
14 }
15 };
16
17 $scope.closeAlert = function(index) {
18 $scope.alerts.splice(index, 1);
19 };
20 });
时间： 2024-11-03 12:47:45