jq--toast小工具

jq toast提示

css

#toastTip {
    display: none;
    position: fixed;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.1rem .16rem;
    min-width: 18%;
    max-width: 80%;  /* 这里最大宽度可能不生效，内容过多展示宽度50%会折行 */
    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, callback ){
    $time = $time === 0 ? 0 : ($time || 1000);
    var oDiv = document.createElement("div");
    oDiv.setAttribute("id", "toastTip");
    //var oBody = document.getElementsByClassName('wrapper')[0];
    var oBody = document.getElementsByTagName('body')[0];
    oBody.append(oDiv);
    $('#toastTip').text( $msg );
    $('#toastTip').fadeIn();
    setTimeout(function() {
        $('#toastTip').fadeOut(function(){
            $('#toastTip').remove();
        });
        if (callback && (typeof callback == 'function')) {
          callback();
        }
    }, $time);
}