[js]自定义alert样式

在工作中会经常遇到想使用alert，但是alert的样式简直是奇丑无比，有时候又想直接使用怎么办呢？能不能像element-ui一样自定义样式呢？话不多说，直接上代码！（毕竟现在公司时间紧，任务重-----纯属吐槽）


CSS样式：

#msg {
    height: 3rem;
    text-align: center;
    position: fixed;
    top: 5%;
    margin-top: -1rem;
    line-height: 3rem;
    width: 100%;
}
#msg span {
    color: #fff;
    background: rgba(58, 145, 97, 0.6);
    height: 3rem;
    display: inline-block;
    padding: 0 2rem;
    border-radius: 5px;
}

js代码：

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

在使用时直接按照之前的方法就可以：

$.ajax({
       type: 'post',
       url: loginUrl,
       data: JSON.stringify(loginData),
       dataType: "json",
       contentType: 'application/json; charset=UTF-8',
       success: function(data) {
           console.log(data)
           if (data.code == 200 || data.code == "200") {
               $('#login').attr('href', 'index.html');
           } else {
               alert('账号或密码错误')
           }
       }
   })

完毕，继续敲代码了

可以的，维老板