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

Question

我正在开发一个应用程序,要求必须通知用户一些背景事件,即来自其他用户的邀请,提醒超时等.

每当事件发生时,控制器将被通知,并且应该向用户显示小窗口.

我应该如何着手实现这一目标.哪种技术/工具对我有帮助.我正在使用jQuery,JSF 2.0和Spring 3.0.

Answer 1

这将给出类似于stackoverflow的通知

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关于如何监听服务器更新和消息加载的答案