自动消失的弹窗效果

<div class="main">
    <div class="demo">
        <a href="#">点击预览效果</a>
    </div>
</div>

* {
    margin:0;
    padding:0
}
.main {
    width:900px;
    min-height:900px;
    margin:0 auto;
    position:relative;
}
.demo {
    margin:100px auto 0;
    text-align:center;
}
.demo a {
    display:inline-block;
    *display:inline;
    zoom:1;
    height:40px;
    line-height:40px;
    width:120px;
    margin:0 auto;
    font-size:16px;
    color:#fff;
    background:#159b48;
    text-align:center;
    text-decoration:none;
    border-radius:5px;
}
.demo a:hover {
    background:#0d853a;
}
#top_alert {
    width:250px;
    padding:10px 0;
    background:#fefcef;
    border:1px solid #f8efb0;
    color:#e69041;
    position:absolute;
    text-align:center;
    left:35%;
    top:0;
}

$(document).ready(function(){
    function showmessage(text){
        if($('#top_alert span').text().length>0){
        $('#top_alert').empty().append('<span>'+text+'</span>');
        $('#top_alert').css('display','block');
        }else{
        $('.main').prepend('<div id="top_alert"><span>'+text+'</span></div>');
           
        }
    }
    
    $('.demo a').bind('click',function(){
        var info='jquery自消失弹窗效果实现了！';
        showmessage(info);
        $('#top_alert').fadeOut(5000);
    });
})