如何自己写一个消息提示呢?
第一种方法,采用css加js实现,比较好理解
一 . css部分
.p-toast{
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
left: 0;
background: rgba(0,0,0,.5);
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.toast_self{
width: 300px;
height: 100px;
line-height: 100px;
border-radius: 22px;
background: #000;
position: relative;
color:#fff;
text-align:center;
font-size:20px;
}
二.js部分
function toast(msg) {
$("body").append('<div class="p-toast"><div class="toast_self">'+msg +'</div></div>');
return setTimeout(function () {
$(".p-toast").remove();
}, 2000)
}
最后不要忘记引入css 和js , jQuery
在需要提示的地方调用toast方法即可 eg : toast(“成功”) , 可以自己更改样式大小以及提示时间.
第二种方法,js里加函数就可实现,比较方便
function Toast(msg,duration,url){ // 消息提示,msg消息内容,duration显示时间,url提示结束跳转网址
duration=isNaN(duration)?3000:duration;
var m = document.createElement('div');
//msg=tkeys(msg)
m.innerHTML = "<div style='display: table-cell;vertical-align: middle;padding:6px'>"+msg+"</div>";
m.style.cssText="width: 20%;height: 50px;left:30%;border-radius:10px;border:1px solid #fff;min-width: 150px;opacity: 0.7;color: rgb(255, 255, 255);display: table;text-align: center;position: fixed;top: 40%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
document.body.appendChild(m);
setTimeout(function() {
var d = 0.5;
m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
m.style.opacity = '0';
setTimeout(function() { document.body.removeChild(m);if(url){location.href=url}}, d * 1000);
}, duration);
}
使用时调用此方法即可