zoukankan      html  css  js  c++  java
  • 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');
        };
    });

  • 相关阅读:
    [Multimedia] 下载 m3u8 格式视频
    [Multimedia] 合并两个 MP4 文件
    [Multimedia] FLV 相关分析工具
    [Android] 从 logcat 日志中获取设备的 mac 地址信息
    [Android Tips] 33. Lottie 在 RecyclerView onBindViewHolder 中 playAnimation 不生效
    [Multimedia] 旋转 MP4 视频方向
    [Jenkins] Jenkins changes 显示 git log 乱码解决
    [Jenkins] Jenkins 时区设置
    [Gradle] 解决高德 jar 包打包到 aar 后 jar 包中的 assets 内容丢失
    [Gradle] 发布 library 到本地 maven 仓库
  • 原文地址:https://www.cnblogs.com/DZzzz/p/10270012.html
Copyright © 2011-2022 走看看