angular.module('custom-template', []).run(["$templateCache", function ($templateCache) {
$templateCache.put("template/modal/confirmModelTemplate.html",
'<div id="youModel" class="m-c">\n' +
' <div class="modal-header">\n' +
' <h4 class="modal-title">{{modalTitle}}</h4>\n' +
' </div>\n' +
' <div class="modal-body">{{modalContent}}</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-default" ng-click="cancel()">取消</button>\n' +
' </div>\n' +
'</div>\n' +
"");
}]);
然后再模块中注入‘'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%);
}
效果图：
