弥补bootstrap没有提示消息JS插件

bootstrap4.0 alerts组件链接：https://v4.bootcss.com/docs/4.0/components/alerts/
bootstrap有一个alerts组件，但是没有提醒组件，有时候ajax发送请求
，要实现一个交互提醒的效果，所以我自己就写了一个消息提醒的JS…

调用方式：

alert_msg('success',res.message,2000)

type对应bootstrap alerts组件的几种样式（primary，secondary，success，danger，warning，info，light，dark）
msg对应HTML字段或者文本
time对应 几秒钟后关闭该msg提醒；

var msg_id = 1000;
// 消息提醒
function alert_msg(type,msg,time){
	if(time == ''){
		time = 1000;
	}
	msg_id = (msg_id + 1);
	var id = msg_id
	var html ='<div class="alert alert-'+type+'" role="alert" id="msg_'+msg_id+'" style="z-index:'+msg_id+'">'+msg+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
	setTimeout(()=>{
		$("#msg_"+id).css({opacity:1,transform:'translateY(10px)'})
	},500)
	$("body").prepend(html)
	setTimeout(()=>{
		console.log('清除')
		$("#msg_"+id).css({opacity:0.1,transform:'translateY(-10px)'})
		setTimeout(()=>{
			$("#msg_"+id).alert('close')
		},500)
	},time)
}
</s

CSS样式，根据自己喜欢的交互方式来选择，或者调整上面的JS

.alert{
	transition: 0.3s;
	opacity: 0;
	transform: translateY(-20px);
	position: absolute;
	top: -10px;
	left: 0;
	width: 100%;
}

效果图：