Top
Fork me on Gitee My Github

jQuery toast 淡入淡出提示

#toastTip{
    position: fixed;
    top: 44%;left:50%;transform: translateX(-50%);
    min-width: 80px;
    max-width: 180px;
    min-height: 18px;
    padding: 10px;
    line-height: 18px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    display: none;
    z-index: 999;
}

/* toast 提示 
   $("#toastTip").showMessage('网络错误,请稍后重试', 1400);
   绑定在window上,使用方法:showMessage('提示信息', time) window.showMessage = function() {}
*/
  $.fn.extend({
    showMessage: function( $msg, $time ){
        $time = $time === 0 ? 0 : ($time || 1000);
        var oDiv = document.createElement("div");
        oDiv.setAttribute("id", "toastTip");
        var oBody = document.getElementsByTagName('body')[0];
        oBody.append(oDiv);
        $('#toastTip').text( $msg );
        $('#toastTip').fadeIn();
        setTimeout(function() {
            $('#toastTip').fadeOut(function(){
              $('#toastTip').remove();
            });
        }, $time);
    }
});	
posted @ 2019-10-22 14:09  lisashare  阅读(961)  评论(0编辑  收藏  举报