angular + boostrap 模态 【modal】 

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

　　

 1 <body ng-app="myApp" style="background:#4A4A4A" class="row">
 2     <div style="color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;">FE-演示平台</div>
 3     <section class="row" >
 4         <section ng-controller="modalDemo" class="col-md-6" style="margin:40px auto; float:none; background:#fff; padding:30px;">
 5     <script type="text/ng-template" id="myModelContent.html">  //创建一个局部视图，需要的时候引用它， 下面会用到
 6         <div class="modal-header"> // modal头部 。body  footer 类推
 7             <h3 class="modal-title">html5jq模态框</h3>
 8         </div>
 9         <div class="modal-body">
10             <ul>
11                 <li ng-repeat="item in items">
12                 <a ng-click="selected.item = item">{{item}}</a> //显示当前点击的item
13                 </li>
14                 当前选择： <b>{{selected.item}}</b>
15             </ul>
16         </div>
17         <div class="modal-footer">
18             <button class="btn btn-primary" ng-click="ok()">
19             确认
20             </button>
21             <button class="btn btn-warning" ng-click="cancel()">退出</button>
22         </div>
23     </script>
24             <button class="btn btn-info" ng-click="open()">点我！</button>
25             <button class="btn btn-default" ng-click = "open('lg')">大模态</button>  //lg 大模态，sm小模态
26             <button class="btn btn-default" ng-click = "open('sm')">小模态</button>
27             <hr>
28             <div ng-show="selected">当前选择：{{selected}}</div>
29         </section>
30     </section>
31 </body>
View Code
 1 <script>
 2     angular.module('myApp',['ui.bootstrap']).controller('modalDemo',function($scope,$modal,$log){ //
 3         $scope.items = ['html5','jq','FE-演示平台'];
 4         $scope.open = function(size){  //打开模态 
 5             var modalInstance = $modal.open({
 6                 templateUrl : 'myModelContent.html',  //指向上面创建的视图
 7                 controller : 'ModalInstanceCtrl',// 初始化模态范围
 8                 size : size, //大小配置
 9                 resolve : {
10                     items : function(){
11                         return $scope.items;
12                     }
13                 }
14             })
15             modalInstance.result.then(function(selectedItem){  
16                 $scope.selected = selectedItem;
17             },function(){
18                 $log.info('Modal dismissed at: ' + new Date())
19             })
20         }
21     })
22     angular.module('myApp').controller('ModalInstanceCtrl',function($scope,$modalInstance,items){ //依赖于modalInstance
23         $scope.items = items;
24         $scope.selected = {
25             item : $scope.items[0]
26         };
27         $scope.ok = function(){  
28             $modalInstance.close($scope.selected.item); //关闭并返回当前选项
29         };
30         $scope.cancel = function(){
31             $modalInstance.dismiss('cancel'); // 退出
32         }
33     })
34 </script>
View Code

 

posted on 2015-07-14 11:27  石门老猿  阅读(265)  评论(0)    收藏  举报

导航