In the process of developing GUI programs, the concept of modal dialog boxes and modeless dialogs are often used.
Modal dialog box: The parent window is unable to respond to a message during the child interface activity. Exclusive User input
modeless dialog box: no effect between windows
Main difference: modeless dialog box and app shared message loop, not exclusive user.
Modal dialog box exclusive user input, other interface cannot respond
The content of this article
Angular JS Implementation Mode dialog box. Based on Angularjs v1.5.3 and Bootstrap v3.3.6.
Project structure
Figure 1 Project Structure
Run results
Figure 1 Operation Result: Large mode
Index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]--><!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]--><!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head>
< meta charset = "UTF-8" >
href="../src/vendor/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myApp" class="body">
<!-- modal template -->
<script type="text/ng-template" id="myModelContent.html">
<div class="modal-header">
< H3 class = "modal title" > modal box</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{item}}</a>
</li>
< div class = "H2" > current selection:
<b>{{selected.item}}</b></div>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">
confirm
</button>
< button class = "BTN BTN warning" ng Click = "cancel()" > Exit < / button >
</div>
</script>
< div class = "container H1" > angularjs modal dialog box < / div >
<section class="row">
<section ng-controller="modalDemo" class="col-md-6"
style="margin: 40px auto; float: none; background: #fff; padding: 30px;">
< button class = "BTN BTN default" ng Click = "open ('lg ')" > large mode < / button >
< button class = "BTN BTN default" ng Click = "open()" > medium mode < / button >
< button class = "BTN BTN default" ng Click = "open ('sm ')" > small mode < / button >
<hr>
< div class = "H1" ng show = "selected" > current selection: {{selected}} < / div >
</section>
</section>
<!-- load js -->
<script src="../src/vendor/angular/angular.js">
</script>
<script
src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js">
</script>
<script src="../src/js/mymodal.js">
</script>
</body>
</html>
mymodal.js
/** * */angular.module('myApp',
[ 'ui.bootstrap' ])
// demo controller.controller('modalDemo', function($scope, $modal, $log)
{
// list
$scope.items = [ 'angularjs', 'backbone', 'canjs', 'Ember', 'react' ];
// open click
$scope.open = function(size)
{
var modalInstance = $modal.open({
templateUrl : 'myModelContent.html',
controller : 'ModalInstanceCtrl', // specify controller for modal
size : size,
resolve : {
items : function()
{
return $scope.items;
}
}
});
// modal return result
modalInstance.result.then(function(selectedItem)
{
$scope.selected = selectedItem;
}, function()
{
$log.info('Modal dismissed at: ' + new Date())
});
}})// modal controller.controller('ModalInstanceCtrl', function($scope, $modalInstance, items)
{
$scope.items = items;
$scope.selected =
{
item : $scope.items[0]
};
// ok click
$scope.ok = function()
{
$modalInstance.close($scope.selected.item);
};
// cancel click
$scope.cancel = function()
{
$modalInstance.dismiss('cancel');
}});
The above content is small series to introduce the Angularjs modal dialog box, I hope to help you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
