本问参阅资料整理Anglarjs模态三种实现方式:
简介
模态对话框(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;
}
}
};