js实现alert弹框自定义样式

1. 首先用css渲染一个样式

#msg{
    height: 2rem;
    text-align: center;
    position: fixed;
    top: 50%;
    margin-top: -1rem;
    line-height: 2rem;
    width: 100%;
}
#msg span{
    color: #fff;
    background: #83C422;
    height: 2rem;
    display: inline-block;
    padding: 0 3rem;
    border-radius: 52px;
}

2. js匿名一个函数，用的时候就直接用alert事件就行了

<script>
	 function alert(e){
	     $("body").append("<div id='msg'><span>"+e+"</span></div>");
	     clearmsg();
	 }
	 function clearmsg(){
	     var t = setTimeout(function(){
	         $("#msg").remove();
	     },2000)
	 };
 </script>

3. 效果