Toast

一个函数调用搞定

jquery版本

.xh-toast-block {

          width: 300px;

            position: fixed;

            z-index: 9999;

            font-size: 18px;

            color: #e7e7e7;

            padding: 10px 20px;

            background: rgba(0, 0, 0, 0.7);

            left: 50%;

            top: 50%;

            line-height: 40px;

            border-radius: 10px;

            text-align: center;

            margin-top: -30px;

            margin-left: -150px;

        }

//点击提示框

    function xhToast(width,height,msg) {     

        var str = "<div class='xh-toast-block' style='width:"+ width +"px;height:"+height+"px;background: rgba(0, 0, 0, .7);border-radius: 4px;text-align: center;line-height:"+ height+"px;font-size: 14px;color: #ffffff;position: absolute;top:50%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);'>"+msg+"</div>"

        $('body').append(str);

        setTimeout(function () {

            $('.xh-toast-block').remove();

        }, 2000);

    }

原生js   每次移除节点

function Toast(W, H, msg) {

var ToastToast = document.getElementById('ToastToast');

if(ToastToast != null) {

ToastToast.parentNode.removeChild(ToastToast);

}

var str = "<div id='ToastToast' style='width:" + W + "px;height:" + H + "px;line-height:" + H + "px;background:rgba(0,0,0,.4);text-align:center;color: #ffffff;position: absolute;left: 50%;top:50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);border-radius: 4px;'>" + msg + "</div>";

var body = document.getElementsByTagName('body')[0];

body.innerHTML += str;

setTimeout(function() {

var ToastToast1 = document.getElementById('ToastToast');

if(ToastToast1 != null) {

ToastToast1.parentNode.removeChild(ToastToast1);

}

}, 3000);

}

每次不移除节点只是隐藏改变内容

function Toast1(W, H, msg) {

var tosatdiv = document.getElementById('Toast');

if(tosatdiv != null) {

tosatdiv.style.display = 'block';

tosatdiv.style.width = W+'px';

tosatdiv.style.height = H+'px';

tosatdiv.style.lineHeight = H+'px';

tosatdiv.innerHTML = msg;

} else {

var body = document.getElementsByTagName('body')[0];

var div = document.createElement("div");

div.setAttribute("id", "Toast");

div.style.width = W+'px';

div.style.height = H+'px';

div.style.lineHeight = H+'px';

div.style.background = 'rgba(0,0,0,.4)';

div.style.textAlign = 'center';

div.style.color = '#ffffff';

div.style.position = 'absolute';

div.style.top = '50%';

div.style.left = '50%';

div.style.transform = 'translate(-50%,-50%)';

div.style.borderRadius = '4px';

div.innerHTML = msg;

body.appendChild(div);

}

var timer = setTimeout(function() {

var divtoast = document.getElementById('Toast');

divtoast.style.display = 'none';

}, 2000)

}