使用方法:
toast.show('要提示的内容',2000) //2000是时间,2s后弹窗消失
具体代码如下:
toast.js部分,需要的页面引用下这个js
// 常用方法1 闪屏 toast 提示,2秒后关闭
var toast = {
t: null,
show: function (msg, time) {
var $toast = $('#toast');
var $mask = $('.mask')
if (this.t) {
clearTimeout(this.t);
}
if (msg) {
var $toastContent = $('#toast .toast__content');
$toastContent.html(msg);
}
$toast.fadeIn(100);
$mask.show()
if (time) {
toast.t = setTimeout(function () {
$toast.fadeOut(100);
$mask.hide()
}, time);
} else {
toast.t = setTimeout(function () {
$toast.fadeOut(100);
$mask.hide()
}, 2000);
}
}
}
html部分
<div style="display: none;" id="toast">
<div class="mask"></div>
<div class="toast__content">
内容内容
</div>
</div>
css样式
/*蒙层![在这里插入图片描述](https://img-blog.csdnimg.cn/201912092006502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODE1MjQ5NA==,size_16,color_FFFFFF,t_70)*/
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.toast_content{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1200;
display: flex;
align-items: center;
background: rgba(40, 40, 40, 0.75);
color: #fff;
border-radius: 80px;
padding: 30px 50px;
font-size: 32px;
line-height: 20px;
justify-content: center;
}