JQ实现Ant Design 全局提示message效果

效果：

js代码：

/*
* 操作提示框： 成功、失败、提示
* imgSrc: 对应图片
* message: 提示文本
* $parent: 父级容器
* css: 样式
*/
function message(imgSrc, message, $parent, css) {
    var $exTips = $('<div class="exTips autoHide">' +
        '<img src="' + imgSrc + '" class="tipImg">' +
        '<span class="tipContent">' + message + '</span>' +
        '</div>');
    var $parentDom = $parent ? $parent : $('body');
    if( $('.exTips.autoHide').length > 0 ) {
        //向下排队
        var top = parseFloat($('.exTips.autoHide:first').attr('finalTop'));
        $exTips.css({
            'top': $('.exTips.autoHide:first').css('top'),
        }).prependTo( $parentDom ).css('left', 'calc(50% - ' + $exTips.width() / 2 + 'px)').attr({
            'finalTop': top + 70 + 'px',
            'beginTop': $('.exTips.autoHide:first').css('top')
        }).animate({
            'top': top + 70 + 'px',
            'opacity': 1,
        }, 800, 'easeOutQuint',function() {
            setTimeout(function() {
                $exTips.animate({
                    'top': $(this).attr('beginTop'),
                    'opacity': 0
                }, function() {
                    $(this).remove()
                })
            }, 2500) 
        })
    }else {
        $exTips.prependTo( $parentDom ).attr('finalTop', $parent ? '0px' : '60px')
        .css('left', 'calc(50% - ' + $exTips.width() / 2 + 'px)').animate({
            'top': $parent ? '0px' : (60 + document.documentElement.scrollTop + 'px'),
            'opacity': 1,
        }, 800, 'easeOutQuint', function() {
            setTimeout(function() {
                $exTips.animate({
                    'top': $(this).attr('finalTop'),
                    'opacity': 0
                }, function() {
                    $(this).remove()
                })  
            }, 2500)  
        })
    }
},

css：

.exTips {
    position: absolute;
    left: 45%;
    top: 0px;
  	opacity: 0;
    height: 44px;
    padding: 10px 20px;
    background-color: #FFFFFF;
    border-radius: 4px;
    z-index: 999;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0px 10px 32px 0px rgba(38, 38, 38, 0.18);
}
.exTips .tipImg {
    width: 20px;
    vertical-align: top;
}
.exTips .tipContent {
	font-size: 14px;
    margin-left: 16px;
}

调用

message('/Tip_yellow.svg', '至少选中一条告警记录!')