js 小工具

jq toast提示

css

#toastTip {
    display: none;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.1rem .2rem;
    max- 80%;
    line-height: 0.4rem;
    font-size: 0.28rem;
    text-align: center;
    color: #ffffff;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 0.1rem;
    z-index: 100;
}

js

/* 
    toast 提示：绑定在window上，使用方法：showMessage('提示信息', time) 
*/
window.showMessage = function( $msg, $time ){
    $time = $time === 0 ? 0 : ($time || 1000);
    var oDiv = document.createElement("div");
    oDiv.setAttribute("id", "toastTip");
    var oBody = document.getElementsByClassName('wrapper')[0];
    oBody.append(oDiv);
    $('#toastTip').text( $msg );
    $('#toastTip').fadeIn();
    setTimeout(function() {
        $('#toastTip').fadeOut(function(){
            $('#toastTip').remove();
        });
    }, $time);
}