# 基本实现 如图:
使用方法(直接复制就可使用):
页面:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="plugins/UI.js"></script>
<title>UI.js</title>
</head>
<body>
<script>
// 其中
// success toast warning fail方法可以支持两种方式传值,字符串和对象
// ask方法仅支持 对象 方式传值
// alert方法仅支持 字符串 方式传值
$(function () {
// 成功提示 icon 1-4 默认是3 支持回调函数
// UI.success();
// UI.success('保存成功', function () {
// alert(666)
// }, 2000);
// UI.success({
// 'msg': '保存成功',
// 'time': 1000,
// 'icon': 3
// }, function () {
// alert(666)
// });
// 自定义提示 支持回调函数
// UI.toast('保存成功', function () {
// alert(666)
// }, 1000);
// UI.toast({
// 'msg': '保存成功',
// 'time': 2000,
// }, function () {
// alert(666)
// })
// 警告提示 icon 1-2 默认是1 支持回调函数
// UI.warning('系统异常', function () {
// alert(666)
// }, 1000);
// UI.warning({
// 'msg': '系统异常',
// 'time': 1000,
// 'icon': 1
// }, function () {
// alert(666)
// })
// 失败提示 icon 1-2 默认是1 支持回调函数
// UI.fail('保存失败', function () {
// alert(666)
// }, 1000);
// UI.fail({
// 'msg': '保存失败',
// 'time': 1000,
// 'icon': 1
// }, function () {
// alert(666)
// })
// 请求 支持三个回调函数 确定按钮 取消按钮 直接隐藏
// UI.ask({
// 'title': '询问',
// 'msg': '',
// }, function () {
// alert('点击确定按钮')
// })
// 自定义提示 不支持回调
// UI.alert('登录成功', 'success', 1000);
UI.alert('登录失败','fail');
// UI.alert('登录异常','warn');
// UI.alert('alert');
});
</script>
</body>
</html>
这其中的UI.js如下:
/*jshint multistr: true */
var UI = {
// 成功提示
success: function (params, event, time) {
icon = 'check-square-o';
if (typeof params === 'object') {
msg = params.msg;
if (msg === undefined || msg == '') {
msg = 'Success';
}
time = params.time;
if (time === undefined || time == '') {
time = 1500;
}
icon = params.icon;
if (icon == 1) {
icon = 'check-circle-o';
} else if (icon == 2) {
icon = 'check-circle';
} else if (icon == 3 || icon == undefined || icon == '') {
icon = 'check-square-o';
} else if (icon == 4) {
icon = 'check-square';
} else {
icon = 'check-square-o';
}
} else if (typeof params === 'string') {
if (params === undefined || params == '') {
params = 'Success';
}
if (time === undefined || time == '') {
time = 1500;
}
msg = params;
} else if (params === undefined || params == '') {
msg = 'Success';
time = 1500;
}
var html = '<div class="modal fade" id="successModal">\
<div class="modal-dialog" style="width: 240px;">\
<div class="modal-content" style="text-align: center;border: none;">\
<div class="modal-header-centered" style="margin-top: 5px;">\
<i class="fa fa-'+ icon + ' fa-2x"></i><br>\
<h6>'+ msg + '</h6>\
</div>\
<div class="dropdown-divider"></div>\
<div class="modal-footer-centered" style="margin-bottom: 5px;">\
<button type="button" class="btn btn-info btn-sm" data-dismiss="modal">确定</button>\
</div>\
</div>\
</div>\
</div>';
$('body').append(html);
var target = '#successModal';
$(target).modal('show');
setTimeout(function () {
$(target).modal('hide');
}, time);
if (event) {
$(target).on('hidden.bs.modal', function () {
event();
UI.remove_hide(target);
});
} else {
$(target).on('hidden.bs.modal', function () {
UI.remove_hide(target);
});
}
},
// 警告
warning: function (params, event, time) {
icon = 'fa-exclamation-triangle';
if (typeof params === 'object') {
msg = params.msg;
if (msg === undefined || msg == '') {
msg = 'Warning';
}
time = params.time;
if (time === undefined || time == '') {
time = 1500;
}
icon = params.icon;
if (icon == 1) {
icon = 'fa-exclamation-circle';
} else if (icon == 2 || icon == undefined || icon == '') {
icon = 'fa-exclamation-triangle';
} else {
icon = 'fa-exclamation-triangle';
}
} else if (typeof params === 'string') {
if (params === undefined || params == '') {
params = 'Warning';
}
if (time === undefined || time == '') {
time = 1500;
}
msg = params;
} else if (params === undefined || params == '') {
msg = 'Warning';
time = 1500;
}
var html = '<div class="modal fade" id="waringModal">\
<div class="modal-dialog" style="width: 240px;">\
<div class="modal-content" style="text-align: center;">\
<div class="modal-header-centered" style="margin-top: 5px;">\
<i class="fa '+ icon + ' fa-2x"></i><br>\
<span>'+ msg + '</span>\
</div>\
<div class="dropdown-divider"></div>\
</div>\
</div>\
</div>';
$('body').append(html);
var target = '#waringModal';
$(target).modal('show');
setTimeout(function () {
$(target).modal('hide');
}, time);
if (event) {
$(target).on('hidden.bs.modal', function () {
event();
UI.remove_hide(target);
});
} else {
$(target).on('hidden.bs.modal', function () {
UI.remove_hide(target);
});
}
},
// 错误提示
fail: function (params, event, time) {
icon = 'fa-times-circle';
if (typeof params === 'object') {
msg = params.msg;
if (msg === undefined || msg == '') {
msg = 'Fail';
}
time = params.time;
if (time === undefined || time == '') {
time = 1500;
}
icon = params.icon;
if (icon == 1) {
icon = 'fa-times-circle-o';
} else if (icon == 2 || icon == undefined || icon == '') {
icon = 'fa-times-circle';
} else {
icon = 'fa-times-circle';
}
} else if (typeof params === 'string') {
if (params === undefined || params == '') {
params = 'Fail';
}
if (time === undefined || time == '') {
time = 1500;
}
msg = params;
} else if (params === undefined || params == '') {
msg = 'Fail';
time = 1500;
}
var html = '<div class="modal fade" id="failModal">\
<div class="modal-dialog" style="width: 240px;">\
<div class="modal-content" style="text-align: center;">\
<div class="modal-header-centered" style="margin-top: 5px;">\
<i class="fa '+ icon + ' fa-2x"></i><br>\
<span>'+ msg + '</span>\
</div>\
<div class="dropdown-divider"></div>\
<div class="modal-footer-centered" style="margin-bottom: 5px;">\
<button type="button" style="text-align: center;" class="btn btn-danger btn-sm" data-dismiss="modal">确定</button>\
</div>\
</div>\
</div>\
</div>';
$('body').append(html);
var target = '#failModal';
$(target).modal('show');
setTimeout(function () {
$(target).modal('hide');
}, time);
if (event) {
$(target).on('hidden.bs.modal', function () {
event();
UI.remove_hide(target);
});
} else {
$(target).on('hidden.bs.modal', function () {
UI.remove_hide(target);
});
}
},
// 询问
ask: function (params, event_fix, event_cancle) {
if (params === undefined || params == '') {
title = 'Tips';
msg = 'Are you sure';
} else {
title = params.title;
msg = params.msg;
if (title === undefined || title == '') {
title = 'Tips';
} else if (msg === undefined || msg == '') {
msg = 'Are you sure';
}
}
var html = '<div class="modal fade" id="askModal">\
<div class="modal-dialog modal-dialog-centered" style="width: 300px;">\
<div class="modal-content">\
<div class="modal-header">\
<h5 class="modal-title" id="exampleModalLabel">'+ title + '</h5>\
<i class="fa fa-close" data-dismiss="modal"></i>\
</div>\
<div class="modal-body">\
<i class="fa fa-question fa-2x"></i> ' + msg + '\
</div>\
<div class="modal-footer">\
<button type="button" id="cancle" class="btn btn-secondary" data-dismiss="modal">取消</button>\
<button type="button" id="fix" class="btn btn-primary" data-dismiss="modal">确定</button>\
</div>\
</div>\
</div>\
</div>';
$('body').append(html);
var target = '#askModal';
$(target).modal('show');
if (event_fix) {
$("#fix").on('click', function () {
$(target).modal('hide');
event_fix();
$(target).remove();
UI.remove_hide(target);
});
}
if (event_cancle) {
$("#cancle").on('click', function () {
$(target).modal('hide');
event_cancle();
UI.remove_hide(target);
});
}
if (event_fix == undefined || event_cancle === undefined) {
$(target).modal('hide');
$(target).on('hidden.bs.modal', function () {
UI.remove_hide(target);
});
}
},
// Toast提示框
toast: function (params, event, time) {
if (typeof params === 'object') {
msg = params.msg;
if (msg === undefined || msg == '') {
msg = 'Success';
}
time = params.time;
if (time === undefined || time == '') {
time = 1500;
}
} else if (typeof params === 'string') {
if (params === undefined || params == '') {
params = 'Success';
}
msg = params;
if (time === undefined || time == '') {
time = 1500;
}
} else if (params === undefined || params == '') {
msg = 'Success';
time = 1500;
}
var html = '<style>\
.modal-backdrop {\
opacity: 0 !important;\
filter: alpha(opacity=0) !important;\
}\
</style>\
<div class="modal" id="toast">\
<div class="d-flex justify-content-center align-items-center" style="min-height: 200px; margin-top: 20%;">\
<div class="toast show">\
<div class="toast-body">\
'+ msg + '\
</div>\
</div>\
</div>\
</div>';
$('body').append(html);
var target = '#toast';
$(target).modal('show');
setTimeout(function () {
$(target).modal('hide');
}, time);
if (event) {
$(target).on('hidden.bs.modal', function () {
event();
UI.remove_hide(target);
});
} else {
$(target).on('hidden.bs.modal', function () {
$(target).remove();
});
}
},
// Alert 提示
alert: function (msg, type, time) {
switch (type) {
case type = 'success':
type = 'success';
icon = 'check-circle';
break;
case type = 'warn':
type = 'warning';
icon = 'exclamation-circle';
break;
case type = 'fail':
type = 'danger';
icon = 'window-close';
break;
default:
type = 'info';
icon = 'fire';
break;
}
if (msg === undefined || msg == '') {
msg = 'This is message';
}
if (time === undefined || time == '') {
time = 2000;
}
var html = '<div class="modal" id="alert">\
<style>\
.modal-backdrop {\
opacity: 0 !important;\
filter: alpha(opacity=0) !important;\
}\
</style>\
<div class="d-flex justify-content-center align-items-center" style="min-height: 200px; margin-top: 20%;">\
<div class="alert alert-'+ type + ' alert-dismissible-centered" style="width: auto;">\
<i class="fa fa-'+ icon + '"></i>\
<strong>'+ msg + '</strong>\
</div>\
</div>\
</div>';
$('body').append(html);
var target = '#alert';
$(target).modal('show');
setTimeout(function () {
$(target).modal('hide');
$(target).remove();
}, time);
},
// 隐藏遮罩层
remove_hide: function (obj) {
$(obj).remove();
$('.modal-backdrop').remove();
}
};
欢迎使用评论