In the process of GUI program development, there are often concepts of modal dialog boxes and non-modal dialog boxes.
Modal dialog: During child interface activity, the parent window cannot respond to the message. Exclusive user input
Non-modal dialog box: No effect between windows
Main differences: The non-modal dialog box shares the message loop with the APP and will not exclusively occupy users.
The modal dialog box exclusively occupies user input, and other interfaces cannot respond
Content of this article
Angular JS Implementation Pattern Dialog. Based on AngularJS v1.5.3 and Bootstrap v3.3.6.
Project structure
Figure 1 Project structure
Running results
Figure 1 Operation results: Large mode
index.html
<!DOCTYPE html><!--[if lt IE 7]> <html><![endif]--><!--[if IE 7]> <html><![endif]--><!--[if IE 8]> <html> <![endif]--><!--[if gt IE 8]><!--><html><!--<!--<![endif]--><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><title>AngularJS Modal dialog box</title><link rel="stylesheet" href="../src/vendor/bootstrap/dist/css/bootstrap.css"></head><body ng-app="myApp"> <!-- modal template --> <script type="text/ng-template" id="myModelContent.html"> <div> <h3>Modal box</h3> </div> <div> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item = item">{{item}}</a> </li> <div>Currently selected: <b>{{selected.item}}</b></div> </ul> </div> <div> <button ng-click="ok()">Confirm</button> <button ng-click="cancel()">Exit</button> </script> <div>AngularJS Modal Dialog</div> <section> <section ng-controller="modalDemo" style="margin: 40px auto; float: none; background: #fff; padding: 30px;"> <button ng-click="open('lg')">Massive Modal</button> <button ng-click="open()">Modal</button> <button ng-click="open('sm')">Small modal</button> <hr> <div 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 the AngularJS modal dialog box introduced to you by the editor. I hope it will be helpful to everyone!