modal

<div class="test" style="color: red;">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h4 class="modal-title">确认框</h4>
        </div>
        <div class="modal-body">
            你确定要基线吗?
            <!--<ul>-->
                <!--<li ng-repeat="item in items">-->
                    <!--<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>-->
                <!--</li>-->
            <!--</ul>-->
            <!--Selected: <b>{{ selected.item }}</b>-->
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
    <!--<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>-->
    <!--<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>-->
    <!--<div ng-show="selected">Selection from a modal: {{ selected }}</div>-->
</div>
angular.module('movieApp.AccordionDemoCtrl',['ui.bootstrap']).controller('AccordionDemoCtrl', function ($scope,$uibModal, $log) {
    $scope.oneAtATime = true;
    $scope.status = {
        open:false
    };

    $scope.items = ['item1', 'item2', 'item3'];

    $scope.open = function (size) {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            backdrop: "static",
            size: size,
            resolve: {
                items1: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

    $scope.toggleAnimation = function () {
        $scope.animationsEnabled = !$scope.animationsEnabled;
    };

});
//$uibModalInstance是模态窗口的实例
angular.module('movieApp.AccordionDemoCtrl').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) {
    $scope.items = items1;
    $scope.selected = {
        item: $scope.items[0]
    };

    $scope.ok = function () {
        $uibModalInstance.close($scope.selected.item);
    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

原文地址:https://www.cnblogs.com/DZzzz/p/10270012.html