Angalarjs模态框三种实现

来源：互联网发布：端口攻击器编辑：程序博客网时间：2024/05/29 10:51

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

- 简介
- Angalarjs模态框
  - 一window实现confirm确认框
  - 二modal模态框
  - 三基于anglarjs的DialogBox模态框
    - 页面引用
    - 样式表dialogcss
    - directivedialogdialogBoxjs
    - 调用方法

简介

模态对话框（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;               }           }       };

阅读全文

0 0