基于JS和CSS的自动关闭动态提示框

今天有需要一个自动消失的动态提示框组件，在网上搜了一圈，未找到合适的就自已花了点 时间写了一个，实现思路也许不是最好的，但还是可以给一些拿来主义者使用。由于本机安装的浏览器限制，并未完全测试组件的兼容性，仅通过本人安装了的chrome47、IE11、Edge浏览器，低版本浏览器也许会不兼容。

css代码

.da_layer{
    width: 100%;
    height: auto;
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
    z-index: 10000;
    pointer-events: none;   
}
.da_el_content{
    position: relative;
}
.da_alert{
    width: 300px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px gray;
    pointer-events: auto;
    margin-top: 2px;
    position: relative;
    z-index: auto;
}
.da_dynamic{
    position: absolute;
}
.da_alert div:first-child{
    padding:10px;
    text-align: left;
    word-wrap: break-word;
}
.da_info{
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}
.da_success{
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.da_warning{
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}
.da_danger{
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

JS代码

TopMsg = function(){
    var baseLayer;
    //获取消息显示层
    function da_get_alert_layer(msg, level){
        var al = document.createElement('div');
        al.className = 'da_alert ' + level; 
        al.innerHTML = "<div>" + msg + "</div>";
        return al;
    };
    //获取基础层对象
    function da_get_base_layer(){
        var layer = document.createElement('div');
        layer.className = 'da_layer';
        layer.innerHTML = '<div class="da_el_content"></div>';
        return layer;
    };
    //显示信息
    function da_show(msg, level){
        if(baseLayer){
            level = level || 'da_info';
            var node = da_get_alert_layer(msg, level);
            var dynamicLayer = node.cloneNode(true);
            da_toggle_el(node, true);
            baseLayer.appendChild(node);
            da_animate(dynamicLayer, node);
        }
    };
    //销毁信息显示
    function destroy(dl, node){
        setTimeout(function(){
            var opacity =  1;
            da_toggle_el(node, true);
            da_toggle_el(dl, false);
            var top_margin = node.offsetTop;
            da_set_position(dl, node.offsetLeft,  top_margin);
            var out = setInterval(function(){
                opacity -= 0.1;
                dl.style.opacity = opacity;
                top_margin -= 3;
                da_set_position(dl, node.offsetLeft,  top_margin);
                if(dl.style.opacity <= 0){
                    clearInterval(out);             
                    baseLayer.removeChild(dl);
                    baseLayer.removeChild(node);
                }
            }, 100);
        }, 3000);
    };
    //切换元素显示
    function da_toggle_el(el, hide){
        el.style.visibility = hide ? "hidden" : "visible";
    };
    //设置元素坐标
    function da_set_position(el, left, top){
        el.style.top = top + "px";
        el.style.left = left + "px";
    };
    //元素显示动画
    function da_animate(dl, node){
        dl.className = dl.className + ' da_dynamic';
        var height = node.offsetTop - node.offsetHeight;
        da_set_position(dl, node.offsetLeft,  height);
        baseLayer.insertBefore(dl, baseLayer.childNodes[0]);

        var out = setInterval(function(){
            height += 3;
            if(height >= node.offsetTop){
                da_set_position(dl, node.offsetLeft,  node.offsetTop);
                clearInterval(out);
                da_toggle_el(dl, true);
                da_toggle_el(node, false);
                destroy(dl, node);
            }else{
                dl.style.top = height + "px";
            }
        }, 10); 
    };
    //初始化
    function da_init(){
        if(baseLayer !== undefined) return;
        var body = document.body;
        if(body){
            var layer = da_get_base_layer();
            body.appendChild(layer);
            baseLayer = layer.childNodes[0];
        }
    };

    return {
        info: function(message) {
            da_init();
            da_show(message);
        },
        success: function(msg){
            da_init();
            da_show(msg||'操作成功！', 'da_success');
        },
        failure: function(errMsg){
            da_init();
            da_show(errMsg||'操作失败', 'da_danger');
        },
        warning: function(msg){
            da_init();
            da_show(msg, 'da_warning');
        }
    }
}();

效果图如下：

因为本身它就会关闭，因此没有在右上角给关闭的功能。

调用方法：
TopMsg.info(‘提示信息’);
TopMsg.success(‘提示信息’);
TopMsg.failure(‘提示信息’);
TopMsg.warning(‘提示信息’);

注意：需要body加载完毕后使用。