Angalarjs模态框三种实现_angularjs对话框 dialog-CSDN博客

本文链接：https://blog.csdn.net/BuFanQi_Info/article/details/78871792

本问参阅资料整理Anglarjs模态三种实现方式：

- 简介
- Angalarjs模态框

简介

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。一般来说，Windows应用程序中，对话框分为模态对话框和非模态对话框两种。二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作。
模态对话框垄断了用户的输入。当一个模态对话框打开时，用户只能与该对话框进行交互，而其他用户界面对象收不到输入信息。模态对话框下，用户需要操作目标对话框就必须先操作模态对话框。用户对模态对话框的处理如图所示。
这里写图片描述
非模态对话框(Nonmodal Dialogue Box，又叫做无模式对话框)，与模态对话框不同，当用户打开非模态对话框时，依然可以操作其他窗口。
——以上来自百度百科

Angalarjs模态框

一、$window实现confirm确认框

<html>
<head>
    <title></title>
</head>
<body>
   <script src="js/lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', [])
        app.controller('indexController', function ($scope, $window) {
            $scope.ShowConfirm = function () {
                if ($window.confirm("Please confirm?")) {
                    $scope.Message = "You clicked YES.";
                } else {
                    $scope.Message = "You clicked NO.";
                }
            }
        });
    </script>
    <div ng-app="myApp" ng-controller="indexController">
        <input type="button" value="Show Confirm" ng-click="ShowConfirm()" />
        <br />
        <br />
        <span ng-bind = "Message"></span>
    </div>
</body>
</html>

二、$modal模态框

<html>
<head>
    <title></title>
    <style>
        .confirmModal .modal-sm {
          width: 400px;
        }
        .confirmModal .modal-content {
          margin-top: 40%;
        }
        .confirmModal .modal-header {
          padding: 10px 15px;
        }
        .confirmModal .modal-body {
          padding: 10px 15px;
          border-top: 1px solid #e5e5e5;
        }
    </style>
</head>
<body>
   <script src="js/lib/angular.min.js"></script>
    <script type="text/javascript">
       //$modal模板配置
        angular.module('custom-template', [])
        .run(["$templateCache", function($templateCache) {
          $templateCache.put("template/modal/confirmModelTemplate.html",
            '<div class="m-c">\n'+
            '  <div class="modal-header">\n'+
            '    <h4 class="modal-title">{{title}}</h4>\n'+
            '  </div>\n'+
            '  <div class="modal-body">{{content}}</div>\n'+
            '  <div class="modal-footer" style="text-align: center;">\n'+
            '    <button type="button" class="btn btn-primary" ng-click="ok()">确定</button>\n'+
            '    <button type="button" class="btn btn-warning" ng-click="cancel()">取消</button>\n'+
            '  </div>\n'+
            '</div>\n'+
            "");
        }]);
        var app = angular.module('myApp', ['custom-template']);
        app.controller('indexController', function ($scope,$modal) {
                $scope.openConfirmWindow=function(modalTitle,modalContent,modalInstance) {
                    var deferred = $q.defer();
                    /*
                    * modalInstance是在弹窗的基础上再弹出confirm确认框时从第一个弹窗中传进的$modalInstance,
                    * 若是直接在页面上弹出confirm确认框，则不能传$modalInstance,否则会报错
                    */
                    var confirmModal = $modal.open({
                      backdrop: 'static',
                      templateUrl : 'template/modal/confirmModelTemplate.html',  // 指向确认框模板
                      controller : 'ConfirmCtrl',// 初始化模态控制器
                      windowClass: "confirmModal",// 自定义modal上级div的class
                      size : 'sm', //大小配置
                      resolve : {
                        data : function(){
                          return {modalTitle: modalTitle,modalContent: modalContent};//surgeonSug: $scope.surgeonSug,
                        }
                      }
                    });
                    // 处理modal关闭后返回的数据
                    confirmModal.result.then(function() {
                      if(!!modalInstance) {
                        modalInstance.dismiss('cancel');
                      }
                      deferred.resolve();
                    },function(){
                    });
                    return deferred.promise;
                  }
                  var modalTitle = '标题';
                   var modalContent = '内容'
                   $scope.openConfirmWindow(modalTitle,modalContent).then(function() {
                    //业务逻辑
                  });
        });
    </script>
    <div ng-app="myApp" ng-controller="indexController">

    </div>
</body>
</html>

三、基于anglarjs的DialogBox模态框

1.页面引用

<dialog load-data="data"></dialog>

2.样式表（dialog.css）

.dialog-main {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
}
.dialog-main .close-button {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 5px;
  top: 2px;
  font-style: normal;
  font-size: 14px;
  color: #AFAFAF;
  opacity: .5;
  cursor: pointer;
}
.dialog-main .close-button:hover {
  opacity: 1;
}
.dialog-main .dialog-box {
  min-width: 237px;
  position: absolute;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}
.dialog-main p.tips {
  text-align: center;
  font-size: 18px;
  color: #3594C3;
  margin: 23px 0 34px;
}
.dialog-main table.dialog-table {
  width: 70%;
  margin: 0 auto;
}
.dialog-main table.dialog-table tr {
  display: block;
  margin-bottom: 20px;
}
.dialog-main table.dialog-table td {
  width: 160px;
  text-align: left;
  position: relative;
}
.dialog-main table.dialog-table td input,
.dialog-main table.dialog-table td .dropdown-main,
.dialog-main table.dialog-table td select {
  width: inherit;
  height: 30px;
}
.dialog-main table.dialog-table td textarea {
  width: inherit;
}
.dialog-main table.dialog-table td:first-child {
  width: 76px;
}
.dialog-main .dialog-button-box {
  text-align: center;
}
.dialog-main .dialog-button-box button {
  width: 80px;
  height: 25px;
  cursor: pointer;
  font-size: 14px;
  line-height: 25px;
  border: 1px solid #D8D8D8;
  color: #333;
  margin: 0 5px 20px;
  border-radius: 0;
}
.dialog-main .dialog-button-box button.button0 {
  border-width: 0;
  background: #01C5DA;
  color: white;
}

3.directive–dialog（dialogBox.js）

app.directive('dialog', function () {
    return {
        restrict: 'AE',
        scope: {
            loadData: '=loadData'//数据源 可以是对象和url
        },
        template: '<div ng-show="loadData.isShow" class="dialog-main"><div class="dialog-box">' +
        '<div class="dialog-content"><i class="close-button" ng-click="close()">x</i>' +
        '<div ng-include="loadData.template.url"></div>' +
        '</div>' +
        '<div class="dialog-button-box">' +
        '<button ng-click="clickValue(item,$index)" ng-repeat="item in loadData.buttons.list" class="{{\'button\'+$index}}">{{item[key]}}</button>' +
        '</div></div></div>',
        replace: true,
        link: function (scope, element, attr) {
            var buttons = {//默认按钮
                key: 'name',
                list: [
                    {
                        name: '确认',
                        value: true
                    },
                    {
                        name: '取消',
                        value: false
                    }
                ]/*,
                 callback: scope.callBack*/
            };
            scope.events = {};
            scope.init=function(){
                //判断是(内容or模板)or自定义按钮
                if(scope.loadData==undefined){
                    return;
                }else if (typeof scope.loadData == "string") {//通过url传入
                    //scope.loadData = {//默认对话框
                    //    show: false,
                    //    template: scope.loadData,
                    //    buttons: buttons
                    //};
                } else {
                    //模板事件绑定
                    if(scope.loadData.template.events){//是否传入模板事件
                        scope.loadData.template.events(scope.events);
                    }
                    if(scope.loadData.buttons){//需要按钮
                        if (scope.loadData.buttons.list == undefined) {//判断是否使用默认按钮
                            buttons.callback=scope.loadData.buttons.callback;
                            scope.loadData.buttons = buttons;
                        }
                        scope.key = scope.loadData.buttons.key;//用于确定按钮显示哪个字段
                        scope.clickValue = function (item, index) {
                            scope.loadData.buttons.callback(item, index);
                        };
                    }
                }
                scope.close=function(){
                    scope.loadData.isShow=false;
                }
            };
            if(scope.loadData){
                scope.init();
                //scope.loadData.
            }
            scope.$watch('loadData',function(n,o){
                scope.init();
            });


        }
    }
});

4.调用方法

 $scope.title="注册成功";
       $scope.content="感谢你注册蓝海金融!为了你更好的体验使用，建议进行相关认证!";

       $scope.data = {
           isShow: false,
           template: {
               url: basepath + 'content/warn-dialog.html',
               events: function (events) {
                   //因为在当前$scope中定义,所以能够直接访问当前$scope空间
                   events.content = $scope.content;
                   events.title=$scope.title;
                   events.back=function(){//因为传递的是值,需要自己进行触发.
                       $scope.backData ='这是一个回传(还可以查看控制台):'+events.content;
                   };

               }
           },
           buttons: {
               key: 'name',
               list: [
                   {
                       name: '立即绑卡',
                       value: 'false'
                   },
                   {
                       name: '立即登陆',
                       value: 'true'
                   }
               ],
               callback: function (item, index) {
                   if(item.value == 'true'){
                       $location.path('/login');
                   }else{
                       $location.path('/bindcard');
                   }
                   $scope.data.isShow = false;
               }
           }
       };