原生JS实现Web弹出层Toast

网页弹出框是一个比较常见的应用，比如在用户操作界面时弹出提醒框或者加载框，可以给用户提示一些信息。浏览器的alert()弹出警告框会中断用户操作，显得不够友好。我们可以使用原生JS写一个弹出框，类似Android的Toast组件。

先分析一下实现思路：

• 先确定弹出框的样式，写出CSS代码。
• 动态创建元素、设置元素样式。
• 控制元素显示与隐藏。

写出CSS代码

根据想要实现的效果，比如边框背景字体图标等，这里写一个简单的CSS样式代码

#toast{
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    z-index: 9999;
    margin: auto;
    padding: 16px 8px;
    transform: translate(-50%,-50%);
    min-width: 120px;
    height: 25px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
}

如果想先知道上面的CSS样式什么样子，可以将选择器加入到一个div中演示，并将display改为block。

封装组件对象

后面创建元素和控制元素的事情都是由JS完成的，可以封装成对象，再将需要做的事情写成函数。

var toast = {}

创建了一个空对象，后面根据需求添加属性和方法。

因为需要控制显示和隐藏，所以使用setTimeout特别合适。初步设定两个需求，一是同一时间只弹出一个框，二是自动关闭，以下代码设置了三个方法，一个属性。

var toast = {
    hideTimeout : null,
    init : function(){},
    show : function(){},
    hide : function(){}
}

后面分别写出上面方法的实现代码

• init 初始化

function () {
    var toastNode = document.createElement('div');
    toastNode.innerHTML = '默认提示';//设置HTML模板，可以根据需求设计
    toastNode.id = 'toast';//设置id，一个页面有且仅有一个toast
    toastNode.setAttribute('class','toast');// 设置类名，如果有必要的话
    toastNode.style.display = 'none';//设置隐藏，默认隐藏
    document.body.appendChild(toastNode);//添加到body下面
}

初始化代码动态创建了一个隐藏的toast窗口，设置了一些属性

• show 显示toast

function (text){
    if(this.hideTimeout){//判断当前是否有弹出框，有的话先关闭当前
        clearTimeout(this.hideTimeOut);
        this.hideTimeOut = null;
    }
    if(!text){//判断传入提示文本是否为空，是的话返回
        console.log('text为空');
        return;
    }
    var toastNode = document.getElementById('toast');
    if (!toastNode) {//判断toast是否初始化
        console.log('未初始化');
        return;
    }
    var toastText = toastNode.querySelector('.text');
    toastText.innerHTML = text || '';//找到toast设置显示文本
    toastNode.style.display = 'block';//设置toast为显示状态
    this.hideTimeout = setTimeout(function(){//timeout设置多久后隐藏
        toastNode.style.display = 'none';
        toast.hideTimeout = null;
    },2000);
}

上面代码有些长，但是逻辑都特别清晰，先判断toast一些状态，然后显示再隐藏。

• hide 隐藏并移除toast

function (){
    if(this.hideTimeout){//如果当前存在toast，就关闭当前toast
        clearTimeout(this.hideTimeOut);
        this.hideTimeOut = null;
    }
    var toastNode = document.getElementById('toast');
    if (toastNode) {
        toastNode.style.display = 'none';//移除toastDOM
        document.body.removeChild(toastNode);
    }
}

隐藏并移除toast，建议把这部分放在setTimeout中，如果刚初始化就会隐藏移除的话，toast不会弹出来。

完整toast示例代码

    
    
    
    
    


    
点我弹出toast
    
    

条条大路通罗马，通往广场的路也不止一条。实现一个功能往往会有多种方法，这里只是给大家一个参考思路，很多地方还需要优化，发现不足欢迎指出。