自动消失的弹窗效果

来源：互联网发布：快客淘宝软件编辑：程序博客网时间：2024/06/11 01:29

<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);    });})

0 0