文档章节

原生JS封装 toast 弹层,自动关闭

o
 osc_gu9d45li
发布于 2019/04/08 14:10
字数 506
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

由于公司业务需求,要一个公共toast ,下面是自己封装的一个。

css:

.toast {
        text-align: center;
        min-height: 70px;
        width: 220px;
        color: #e6e6e6;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.7);
        position: fixed;
        left: 43%;
        top: 40%;
}

.toast-icon {
    padding-top: 10px;
    padding-bottom: 10px;
}

.toast-tip {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

js:

/*
 * @Author: liguowei
 * @Date:   2019-04-08 10:25:42
 * @Last Modified by:   liguowei01
 * @Last Modified time: 2019-04-08 11:17:17
 */
function toast(){};
toast.prototype = {
    init:function(){
        this.loadCss()
    },
    iconObj : {
        right:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAADIElEQVRYR+2XT0jUQRTH3/e3u0YSYSDuzgwUCOHBS4e6BJmEEfRfiDAI6aAEYkTgsahDNy+BhUQgEgbRoZCoiEpSokuXLh26CAUz4/5YECSIdH++GHFjG9f9o9tq4Bxn5r33+X3fm/d2QZt0YZNy0RZYpZnZUuy/VSwMw71RFF0goqlUKjW5KVJprT3AzG+JaOeystc3HCydTh+Moug1Ee3IpZuZJzYUzFrbvri4+BLA9vwaZObeDQPTWh8loucAtnlQV5RSdzcEzFp7gpmfEVEiD4qJ6LKU8oHbqzmYMaaTiJ4QUTwfCsAlIcTD3F5NwbTWXQDGiChWDKqmillru5l51MtSxMwXlVKP/QZcE8VWgcoS0Xkppau1FQthGKay2ewoM7cCuCqlfFrp+Ch23xjTS0T3PaWyAM4KIV6sZgut9TiA08sXmJl7lFIj1YDTWvcDGPJ8LQDoLAa1VGNaa9dLTuYbA+gTQgyvB85aO8DMg16P+kVEp5RSb0r5hjFmPzNP+d2XiG5IKW+XclDoXGt9C8BND+pnEATHhRDvy/G5VPyF5tWy8R0p5bVyHOXuaK0HAQz4UPF4vCOZTH4s19efV1lgwud8DEsp+8pxqLUeAtDv3f0Ri8WOVQK1oo+FYbhvYWFhAsAu74tHpJQ9ANzYWLGYGdZa9/LcC8xfcwA6hBCfyvmwv+rcN7DWtjKzq4NG7+yREKIbwKIH7aBc4+z29mcTicSRpqamz5VCrVAsr05aAHwoADcuhDgHwDVHYuaYMWYMQJcPFQTBISHEl7VArQrmDrTWDm6SiJKe81dCiDOOy1rrhrEbyvkrA6B9PVBFwdzhzMxMcxRFrpUoT5F3AOYKQKWZ+bBS6utalcrZlZyVxpg97g8CEe0uESwdBMHBVCo1vV6okorlAmQyGTU/P+/gmgsFZWYdi8XaqgVVNpi7mE6nk9lsdhJAiwf3nYjapJTfqqFU2anMD2aMcS3EtZLW5f3purq6tsbGRl1NqIoUywVm5jr3m93B1dfX32toaJitNtSawP4FRCGfJV9lrUD8OFtglSq/pViliv0GWXY44L2QOz4AAAAASUVORK5CYII=',
        err:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACy0lEQVRIS7XXSWsUQRgG4PfrHiOIJw9DLz/BqyKRmMgQcQnGuBACooLgQS96Ebx6EW/eBEVBCC6IMS6oEbeLCCKI4MU/UFUDOUgkCppMv1KhWzplz3RPkplb18zUU+9XS3eLMWYzyfMALkdR9A09/BhjtiZJcsbzvIuilPogIv0AftRqtaF6vf6lF7YxZmeSJDMish7AlBhjTpC8lWI9wR20JSKjYkGt9SkA13uBO+gigPEoiqaX4F7hSqldAJ6m5V0UkbEwDJ9Z7x+cw6+l7asqu0VFxCLrACxD/4NtgzHmeDrndlArwsvQQrgIF5HhMAw/VVntVdC2cAE+LyKNMtxBF0TkYDan7qCXzbH7pVP2jrgxZoTkdDqnCyRH4jh+1a5KHeGqyVP0EYAagFK0Y6nzI+2UfCVoZbhdcgB1kl0lzQKVljqfXCk1ISJ30n3+E4A9dyuXN99XV7D9o4OD5G8A+zstpKIF1jVsjDlC8n526lnY9/19QRC8rbLPV1TqFL0HwAfwC0CfLbXF7SETRdH7qnjlxEqpURF5mEN3k9zktlXFK8EpOlWUzq2C53mNIAg+liUvhbXWe+ytLUOL5tOZ93nP84bL8I6wRUk+FpE+kn9839/bbhFprY8CmEwXXSneFnZRETkQRdFMpxK6OMmhOI4/V95OzWaz0Wq1Xtik9iZu92kZmnWulDopIjfS5HMkG0X4f4lT9Hn2uELycBzHT8oWi3PCWfxm2jbned6OIAi+tj25tNYDJF+vBs06N8acJnnVXpP87vv+UB7PP+wNAHgJYAOAFslD3SYtuJ8vw0Vke/bSsAQ3m81tSZLYI28JFZGJMAwfdFPedr/NJwcwC2DQ4qK13gLgHYCNtioiMr5WaDYYrfU5AFfS61nf9/vtK8wb+zxlUQDHoii6vRZJ3T4cfMomHgRwgeRkHMd3e4Hmkp8FMEby0l8qK9qQ0A6pwwAAAABJRU5ErkJggg==',
tip:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABrUlEQVRIS+3WMUsDMRQA4PcKtlBQiu1J76UFpUgHVyd/gJs4iri4Cro4SxXBWdBFHARBHJxd/AUOrg4i0sVe2iMVcY69SCTDVSi9HDZdmuXg7iVfkktegjCmgmNyYQInmvkgCKqI2AAACQANIuomqhgLSjXVnPNnAFjS7Sil3hhjiyOHhRC+lJLHoVwuVy0Wiy0b3HrEnU5nLoqiMI7k8/nZQqHwOVJYKYXtdjuKIYqIMjaojrUesa7EOf8CgBmDdYnIcwU3AWDBLK5XxljdFfwEAMsGfmSMrbiCHwBg1cD3jLE1V/AtAGwa7JqItp3AQRCcI+KuwU6JaN8VfISIhwY7IKITV/AeIp4ZbIeILpzAnPMtALj5TQSIG77v3zmBwzCs9Xq9F41lMpl6uVzW+9qqpMpcWhBCkH56ntd3YCTVU8NJgUFxqWAhxLSUch0Ra1EUXTHG3m07kgr+cxFoEdE8IvZscGtY/1spZRBHstlspVQq9b0b1glrWCk1xTlvImLF5OoPIioj4vcwLP7dGjYrWl9/js0+vvR9X59WViUVbCUMCJ7A/zGLidr4AdwkmB8lttWIAAAAAElFTkSuQmCC'
    },
    toastTxtObj : {
        right:'成功',
        err:'失败',
        tip:'提示'
    },
    /*
    * icon 1成功   2失败  3 提示
    * toastTxt 提示语
    * time 关闭前的毫秒数 不传默认2000
     */
    showToast: function(icon,toastTxt,time){
        var iconSrc;        
        switch(parseInt(icon)){
            case 1:
            iconSrc = this.iconObj.right;
            break;
            case 2:
            iconSrc = this.iconObj.err;
            break;
            case 3:
            iconSrc = this.iconObj.tip;
            break;
            default:
            iconSrc = this.iconObj.right;
            break;
        }
        var toastTxt = toastTxt || this.toastTxtObj.right;
        html = '<div class="toast-icon"><img src="'+iconSrc+'"></div><div class="toast-tip">'+toastTxt+'</div></div>';
        toastBox = document.createElement('div');
        toastBox.className = 'toast';
        toastBox.id = 'toast';
        toastBox.innerHTML = html;
        document.body.appendChild(toastBox);
    setTimeout(function(){
      document.getElementById('toast').parentNode.removeChild(document.getElementById('toast'));
    },time||2000)
    },
    loadCss:function(){
        toastCss = document.createElement('link');
        toastCss.rel = 'stylesheet';
        toastCss.type = 'text/css';
        toastCss.href = this.T() + 'toast.css';
        document.head.appendChild(toastCss);
    },
    T:function() {
        var b, a, f = window['document']['getElementsByTagName']("script");
        for (var c = 0; c < f.length; c++) {
            b = f[c].getAttribute("src") || "";
            b = b.substr(0, b.toLowerCase().indexOf("toast.js"));
            var a = b.lastIndexOf("/");
            if (a > 0) {
                b = b.substring(0, a + 1)
            }
            if (b) {
                break;
            }
        }
        return b
    }



}
var T = new toast();
T.init();

已上代码不用看,按下面操作来就行:

1.新建文件夹 如toast

2.新建css文件,命名toast.css,把上面的css复制到这个文件里

3.新建js文件,命名toast.js,把上面的js复制到这个文件里

好了,准备完毕,下面是用法:

一、       仅引入js 如:

<script src="../static/plugins/toast/toast.js"></script>

二、       具体用法如下:

/*

* T.showToast(icon,toastTxt,time);

* 三个参数

* icon 1成功   2失败  3 提示

* toastTxt 提示语

* time 关闭前的毫秒数 不传默认2000

* 示例如下:

*/

T.showToast(1,'我是提示语',2000);

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

格式编号始终显示2个小数位 - Format number to always show 2 decimal places

问题: I would like to format my numbers to always display 2 decimal places, rounding where applicable. 我想将数字格式化为始终显示2个小数位,并在适用的情况下四舍五入。 Examples...

富含淀粉
50分钟前
22
0
Docker可视化工具Portainer

1 前言 从没想到Docker也有可视化的工具,因为它的命令还是非常清晰简单的。无聊搜了一下,原来已经有很多Docker可视化工具了。如DockerUI、Shipyard、Rancher、Portainer等。查看对比了一番...

南瓜慢说
52分钟前
20
0
日志系统新贵 Loki,真香!!

最近,在对公司容器云的日志方案进行设计的时候,发现主流的ELK或者EFK比较重,再加上现阶段对于ES复杂的搜索功能很多都用不上最终选择了Grafana开源的Loki日志系统,下面介绍下Loki的背景。...

庞陆阳
今天
14
0
jQuery获取select onChange的值 - jQuery get value of select onChange

问题: I was under the impression that I could get the value of a select input by doing this $(this).val(); 我的印象是我可以通过执行$(this).val();来获取选择输入的值$(this).val()......

javail
今天
13
0
道翰天琼解密宇宙信息大脑三者最核心奥秘,破解认知智能基础理论(群聊形式)

三体论是探索研究宇宙,信息和人类大脑三者关系的理论体系。是认知智能的奠基理论体系之一。宇宙和信息,信息和人类大脑,人类大脑和宇宙,三者之间存在着某种未被完全揭示的奥秘。三体论的核...

jackli2020
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部