在涉及gui程序开发的过程中，常常有模态对话框以及非模态对话框的概念
模态对话框：在子界面活动期间，父窗口是无法进行消息响应。独占用户输入
非模态对话框：各窗口之间不影响
主要区别：非模态对话框与app共用消息循环，不会独占用户。
模态对话框独占用户输入，其他界面无法响应
本文内容
angular js 实现模式对话框。基于 angularjs v1.5.3 和 bootstrap v3.3.6。
项目结构
图 1 项目结构
运行结果
图 1 运行结果：大模态
index.html
angularjs 模态对话框 angularjs 模态对话框
大模态 中模态 小模态 当前选择：{{selected}}

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'); }});
以上内容是小编给大家介绍的angularjs 模态对话框 ，希望对大家有所帮助！