且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何使用jquery向用户显示弹出通知?

更新时间:2023-12-04 09:12:34

这将发出类似于***的通知

this will give a notification similar to the ***

jQuery

$("#notification").fadeIn("slow").append('your message');
$(".dismiss").click(function(){
       $("#notification").fadeOut("slow");
});

HTML

<div id="notification" style="display: none;">
  <span class="dismiss"><a title="dismiss this notification">x</a></span>
</div>

CSS

#notification {
    position:fixed;
    top:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:normal;
    font-size:14px;
    font-weight:bold;
    color:white;
    background-color:#FF7800;
    padding:5px;
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}

另外看看 mplungjan关于如何倾听的答案到服务器更新和消息加载

Also take a look at mplungjan's answer on how to listen to server updates and message load