html 弹框 优化 alert

<!DOCTYPE html>
<html>
<head>
    <title>cs</title>
</head>
<style type="text/css">
   .aa{
       width: 224px;
       height: 35px;
       padding-top: 9px;
       text-align:center;
       /*background-color:#ccc;*/
    /*filter:alpha(Opacity=80);*/
    /*-moz-opacity:0.5;*/
    /*opacity: 0.7;*/
    /*border-radius:20px;*/
   }

   #msg{
    height: 2rem;
    text-align: center;
    position: fixed;
    top: 50%;
    margin-top: -1rem;
    line-height: 2rem;
    width: 100%;
}
#msg span{
    color: #fff;
    background: rgba(0,0,0,0.6);
    height: 2rem;
    display: inline-block;
    padding: 0 3rem;
    border-radius: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
  <div class="aa">播放完成 才能缓存下载哦！！</div>
</body>

<script type="text/javascript">
alert('asaogi')
function alert(e){
    $("body").append("<div id='msg'><span>"+e+"</span></div>");
    clearmsg();
}

function clearmsg(){
    var t = setTimeout(function(){
        $("#msg").remove();
    },2000)
};

</script>
</html>