angular全局确认框confirm

angular.module('custom-template', []).run(["$templateCache", function ($templateCache) {
　　$templateCache.put("template/modal/confirmModelTemplate.html",
　　'<div id="youModel" class="m-c">
' +
　　' <div class="modal-header">
' +
　　' <h4 class="modal-title">{{modalTitle}}</h4>
' +
　　' </div>
' +
　　' <div class="modal-body">{{modalContent}}</div>
' +
　　' <div class="modal-footer" style="text-align: center;">
' +
　　' <button type="button" class="btn btn-primary" ng-click="ok()">确定</button>
' +
　　' <button type="button" class="btn btn-default" ng-click="cancel()">取消</button>
' +
　　' </div>
' +
　　'</div>
' +
　　"");
}]);

　　

然后再模块中注入‘'custom-template’；

打开该模块的方法：

app.factory('Common', ['$http', '$q', '$cookieStore', '$location', '$modal',
　　function ($http, $q, $cookieStore, $location, $modal) {
　　　　return {
　　　　　　openConfirmWindow: function (modalTitle, modalContent, modalInstance) {
　　　　　　var deferred = $q.defer();
　　　　　　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;
　　　　}
　　}
}]);

　　

关闭该模态框同时带参过来：

app.controller('ConfirmCtrl', ['$scope', '$modalInstance', 'data',
　　function ($scope, $modalInstance, data) {
　　$scope.modalTitle = data.modalTitle;
　　$scope.modalContent = data.modalContent;
　　$scope.ok = function () {
　　$modalInstance.close(true);
　　};
　　//关闭邮件框
　　$scope.cancel = function () {
　　　　$modalInstance.dismiss('cancel');
　　};
}]);

　　

在其他控制器调用该确认框：（首先注入Common）

Common.openConfirmWindow('删除提示！', '确定删除吗？').then(function () {
　　$http({
　　　　method: 'POST',
　　　　url: '/contact/delete?id=' + deleteData.id,
　　　　headers: { 'Content-Type': undefined },
　　　　transformRequest: angular.identity
　　}).then(function (response) {
　　　　$scope.toaster.text = response.data.message;
　　　　if (response.data.success == false) {
　　　　　　toaster.pop('error', 'Error', $scope.toaster.text);
　　　　　　return;
　　　　}
　　　　toaster.pop('success', 'Success', $scope.toaster.text);
　　　　$scope.ContactData();
　　}, function (response) {
　　　　$scope.toaster.text = 'Network error. Please try again later!';
　　　　toaster.pop('error', 'Error', $scope.toaster.text);
　　});
});

　　

完成确认框之后会发现确认框在顶部，然后修改全局的css的'.model'样式，所有模态框都垂直居中了，如下：

.modal {
　　position: fixed;
　　top: 0;
　　/* right: 0;
　　bottom: 0;
　　left: 0; */
　　z-index: 1040;
　　display: none;
　　overflow: hidden;
　　-webkit-overflow-scrolling: touch;
　　outline: 0;
　　left: 50%;
　　top: 50%;
　　transform: translate(-50%,-50%);
}

确认框样式：

/*确认框居中样式*/
.confirmModal {
    position: absolute;
      top: 0;
      z-index: 1040;
      overflow: hidden;
      outline: 0;
      left: 50%;
      top: 50%;
      bottom: auto;
      transform: translate(-50%,-50%);
    } 
/*确认框居中样式-end*/

　　

效果图：