jq,html,css封装一个toast弹窗提示功能的小插件

使用方法：

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;
}