angular 实现modal windows效果，即模态窗口，半透明的遮罩层，以及bootstrap(css,components,js的初步学习
废话不说，直接上代码。可直接看效果，对着分析。。今天算是bootstrap 入门了，开心。。
突然居然很多事情就是那样，不要太多的畏惧，迈出第一步其实就成功了一半了。
<html ng-app="app">
<head>
<script src="../lib/js/angular.js"></script>
<script src="../lib/js/ui-bootstrap-tpls-0.13.0 (1).js"></script>
<link href="../lib/bootstrap-3.3.4/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div ng-controller="appController">
<script type="text/ng-template" >
<div class="modal-header">
<h3>I\'m a modal!</h3>
</div>
<div class="modal-body">
<span>Message:{{message}}</span>
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item=item">{{ item }}</a>
<!--<a ng-click="test(item);">{{ item }}</a>-->
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="showModal()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
<div class="col-xs-6">
<div class="well well-sm">I start to learn bootstrap css frow now on!!</div>
<div class="well well-lg">I start to learn bootstrap css frow now on!!</div>
<div class="well ">I start to learn bootstrap css frow now on!!</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default panel-primary" >
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default panel-success">
<div class="panel-heading">
<h1 class="panel-title">Panel title</h1>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Panel title</h1>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
</div>
</div>
<div class="col-xs-6">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Star
</button>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<tr>
<th>#</th>
<th>Month</th>
<th>Savings</th>
<th>Savings</th>
</tr>
<tr>
<th>1</th>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<th>2</th>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<th>3</th>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<th>4</th>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script>
angular.module(\'app\', [\'ui.bootstrap\']).
service(\'DataService\', [\'$rootScope\',
function($rootScope) {
this.data = {};
this.data.message = \'This is a message from a service\';
this.data.items = [\'item1\', \'item2\', \'item3\'];
}
]).
controller(\'myModal\', [\'$scope\', \'$modalInstance\', \'DataService\',
function($scope, $modalInstance, dataService) {
$scope.data = dataService.data;
$scope.message = dataService.data.message;
$scope.items = dataService.data.items;
$scope.selected = {
item: $scope.items[0]
};
$scope.test = function(item){
$scope.selected.item = item;
}
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss(\'cancel\');
};
}
]).
controller(\'appController\', [\'$scope\', \'$modal\', \'$log\',
function($scope, $modal, $log) {
// $scope.data = dataService.data;
$scope.showModal = function() {
var modalInstances = $modal.open({
templateUrl: \'myModalContent.html\',
controller: \'myModal\'
});
modalInstances.result.then(function(selectedItem) {
$scope.selected = selectedItem;
},function(){
$log.info(\'Modal dismissed at :\'+new Date())
})
};
}
]);
</script>
</html>
- 上一篇 »CSS半透明兼容写法
- 下一篇 »模态窗口 javascript html