<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alertDemo</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
.alert-fixed {
width: 300px;
margin-left: -150px;
padding-top: 30px;
padding-bottom: 30px;
opacity: .9;
box-shadow: 0 2px 5px #A5A5A5;
z-index: 1060;
position: fixed;
left: 50%;
text-align: center;
}
</style>
</head>
<body data-ng-app="app">
<br/>
<br/>
<br/>
<br/>
<br/>
<div data-ng-controller="alertController" class="container">
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="2000" class="alert-fixed">{{alert.msg}}</uib-alert>
<button type="button" class='btn btn-primary' ng-click="addAlert()">{{ typeSwitch }}</button>
</div>
</body>
</html>
var app = angular.module('app', ['ui.bootstrap']);
app.controller('alertController', function($scope){
$scope.alerts = [
];
$scope.typeSwitch = false;
$scope.addAlert = function() {
if (!$scope.typeSwitch) {
$scope.alerts.push({type: 'success', msg: '开启关怀成功!'});
$scope.typeSwitch = true;
} else {
$scope.alerts.push({type: 'warning', msg: '关闭关怀成功!'});
$scope.typeSwitch = false;
}
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});