重寫alert樣式

<style type="text/css">
    #msg{
        height: 2rem;
        text-align: center;
        position: fixed;
        top: 30%;
        margin-top: -1rem;
        /*line-height: 24rem;*/
        width: 100%;
        z-index: 99;
    }
    #msg span{
        color: black;
        display: inline-block;
        padding: 0 0;
        border-radius: 10px;
        background: url("__TMPL__Public/assets/images/tishi.png") no-repeat center top white;
        padding-top: 11rem;
        box-shadow: 0 0 20px 2px rgba(0,0,0,.4);
        height: 260px;
        width: 420px;
    }
    #msg span a{
        /*font-size: 20px;*/
        /*line-height: 5rem;*/
        background: #F53E3E;
        padding: 5px 24px;
        border-radius: 3px;
        color: white;
        margin: 15px 145px;
    }
    #msg .sure-btn:hover{
        /*background: #589BF7;*/
        text-decoration: none;
    }
</style>

 

註釋的是定時器   沒有註釋的是點擊肯定纔會消失彈框

<script type="text/javascript">
    function alert(e){
        $("body").append("<div id='msg'><div id='zhezhaoceng'><span>"+e+"<br />"+"<a href='javascript:;' class='sure-btn'>肯定</a></span></div></div>");
        // clearmsg();
    }
    function clearmsg(){
        var t = setTimeout(function(){
            $("#msg").remove();
        },3000)
    };
    $("body").on('click','.sure-btn',function(){
        $('#msg').remove();
    })
    // $('.sure-btn').click(function(){
    //     $('#msg').remove();
    // })
</script>