用AngularJS+bootstrap做弹窗

需要准备Angularjs,bootstrap

bootstrap下载地址

https://v3.bootcss.com/

Angularjs下载地址

https://code.angularjs.org/

引入css,路径是自己文件里的

   <link href="css/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

HTML页面

<script type="text/ng-template" id="myModelContent.html">
        <div class="modal-header">
            <h3 class="modal-title">添加用户</h3> //标题
        </div>
        <div class="modal-body">
        //这里添加内容
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">确认</button>
            <button class="btn btn-warning" ng-click="cancel()">退出</button>
        </div>
    </script>
    <section class="row">
        <section ng-controller="modalDemo" class="col-md-6" style="margin-left:20px;">
            <button class="btn btn-primary" style="width:100px;" ng-click="open('lg')">添加</button>
        </section>
    </section>  
    <script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
    <script src="Js/angular.js"></script>
    <script src="Js/mymodal.js"></script>

mymodal.js页面

angular.module('myApp', ['ui.bootstrap'])
    .controller('modalDemo', function ($scope, $modal, $log) {
        $scope.items = ['angularjs', 'backbone', 'canjs', 'Ember', 'react'];
        $scope.open = function (size) {
            var modalInstance = $modal.open({
                templateUrl: 'myModelContent.html',
                controller: 'ModalInstanceCtrl',
                size: size,
                resolve: {
                    items: function () {
                        return $scope.items;
                    }
                }
            });
        }
    })
    .controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
        $scope.items = items;
        $scope.ok = function () {
            $modalInstance.close($scope.item);
        };
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        }
    })