前言

使用之前要先引入bootstrap.css，bootstrap.js或bootstrap.min.js，两种js文件的区别是一个未压缩一个压缩，无需全部引入。

注意：所有插件都依赖jQuery（也就是说，jQuery必须在所有插件之前引入页面）

bootstrap引入方法：

将文件bootstrap.js或bootstrap.min.js放到所在项目的www/lib/js下

并在index.html中添加

<html ng-app='myApp'> <head><!---- --> <link href='css/bootstrap.css' rel='stylesheet' type='text/css' /> <body ng-controller='MainCtrl'><!---- --> <script lang='javascript' src='lib/js/jquery/jquery-1.8.2.min.js'></script> <script lang='javascript' src='lib/js/bootstrap/bootstrap.min.js'></script><!--注意以上两者的顺序 -->

modal示例：

<body> <button ng-tap="test()" class="btn btn-primary"> Click to show the modal </button> <div class="modal fade" id="myModal" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" >&times;</button> <h5 class="modal-title" id="myModalLabel">Modal title</h5> </div> <div class="modal-body"> One fine body&hellip; </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div></body>

在Controller里调用

function TestController($scope ){ $scope.test=function() { $('#myModal').modal('show'); }}

框效果如图：



更多详解及bootstrap的应用请参考http://v3.bootcss.com/javascript/#modal

本人仍在不断学习中，欢迎交流指正。。。