以上就是样式
来看js文件
/*
//显示loading和success弹窗示例
//显示
showSpring.shower(1,'复制成功')//显示复制成功
showSpring.shower(2,'复制失败')//显示复制失败
showSpring.shower(3,'注意不可复制')//显示注意不可复制
showSpring.shower(4,'这是一条消息')//显示这是一条消息
showSpring.shower(2,'复制成功',2000)//显示成功图片,延迟2秒自动关闭
showSpring.hide()//关闭遮罩
*/
(function (global) {
function ShowSpring () {
if (!global.jQuery) {
throw new Error('jQuery.js is required!');
return null;
}
this.opt = {};
this.timer = null;
this.init();
}
ShowSpring.prototype = {
constructor: ShowSpring,
init: function () {
this.addCss();
this.addHtml();
},
shower: function (type, text, closeTime) {
// 根据类型和文本来确定展示哪些内容
// closeTime自动关闭弹窗
$(".show-spring-inner").attr('type',type)
$(".show-spring-images").attr('type', type);
$(".show-spring-tips").text(text);
$(".show-spring-inner").show();
clearTimeout(this.timer);
if (closeTime > 0) {
this.timer = setTimeout(function () {
$(".show-spring-inner").hide();
}, closeTime);
}
},
hide: function () {
//隐藏所有弹窗
$(".show-spring-inner").hide();
},
addHtml: function (opt) {
if ($('.show-spring-inner').length === 0) {
var html ='<div class="show-spring-inner">'
+ '<div class="show-spring-images"></div>'
+ '<p class="show-spring-tips"></p>'
+ '<div>'
$('body').append(html);
}
},
addCss: function (opt) {
if ($('.show-loading-css').length === 0) {
var css = '<style class="show-loading-css">'
+ '.show-spring-inner{ position: absolute;top: 5%;left: 50%;transform: translate(-50%);width: 420px; height: 45px; border: none; background: #ddecca; color: #91bf55;border-radius:5px; border:1px solid #91bf55;padding: 5px 50px; margin: auto;text-align: center; font-family: 微软雅黑; display:none;}'
+ '.show-spring-inner[type ="2"]{ position: absolute;top: 5%;left: 50%;transform: translate(-50%);min-width: 328px;height: 45px; border: none;background: #faf0f0; border-radius:5px; border:1px solid #e37470; color: #e37470; padding: 5px 50px; margin: auto; text-align: center; font-family: 微软雅黑;}'
+ '.show-spring-inner[type ="3"]{ position: absolute;top: 5%;left: 50%;transform: translate(-50%);min-width: 328px; height: 45px; border: none; background: #ecf4fb; border-radius:5px; border:1px solid #5f98e6; color: #5f98e6; padding: 5px 50px; margin: auto; text-align: center; font-family: 微软雅黑;}'
+ '.show-spring-inner[type ="4"]{ position: absolute;top: 5%;left: 50%;transform: translate(-50%);min-width: 328px; height: 45px; border: none; background: #fdf8e9; border-radius:5px; border:1px solid #e3b240; color: #e3b240; padding: 5px 50px; margin: auto; text-align: center; font-family: 微软雅黑;}'
+ '.show-spring-images{background: url("/osp2016/images/agent2016/show-success.png") no-repeat center;background-size: 20px;display: block; width: 20px; height: 20px; margin: 7px 10px 9px 115px;float:left;}'
+ '.show-spring-images[type="2"]{background:url("/osp2016/images/agent2016/show-fail.png") no-repeat center;background-size: 20px;display: block; width: 20px; height: 20px; margin: 7px 10px 9px 115px;float:left;}'
+ '.show-spring-images[type="3"]{background:url("/osp2016/images/agent2016/show-xiaoxi.png") no-repeat center;background-size: 20px;display: block; width: 20px; height: 20px; margin: 7px 10px 9px 115px;float:left;}'
+ '.show-spring-images[type="4"]{background:url("/osp2016/images/agent2016/show-warning.png") no-repeat center;background-size: 20px;display: block; width: 20px; height: 20px; margin: 7px 10px 9px 115px;float:left;}'
+ '.show-spring-tips{ font-size: 15px; float:left;line-height: 35px;}'
+ '<style>';
$('body').append(css);
}
},
}
global.showSpring = new ShowSpring();
})(window)
html
一定要先把这个js引入进去才可以
不然会报错 也有可能报错执行顺序的问题
// 添加链接
$(document).on("click",".read-link-add",function(){
$.ajax({
type:"get",
url:knowledgelink,
data:{kId:knowlinkid},
dataType: "json",
success:function (res) {
if(res.code == '0'){
showSpring.shower(1,'复制成功',1000)//复制成功
}else{
showSpring.shower(2,'网络波动,请稍后重试',1000)
}
}
});
})
调用接口成功之后出现提示语