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

I am developing an application which requires that user must be notified about some background events i.e. invitation from other user, reminder time out etc.

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

Whenever the event occurs the controller will be notified, and a small window should be displayed to the user.

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

How should I proceed to achieve this. Which technology / tool will help me. I am using jQuery, JSF 2.0 and Spring 3.0.

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

4 个解决方案

#1

this will give a notification similar to the *

这将提供类似于*的通知

jQuery

jQuery的

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

HTML

HTML

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

CSS

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
}

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

另请参阅mplungjan关于如何监听服务器更新和消息加载的答案

#2

Using code from @Anu's suggestion - my fiddle, you can simply add a poll

使用来自@ Anu建议的代码 - 我的小提琴，你可以简单地添加一个民意调查

$(document).ready(function() {
  $(".dismiss").click(function(){$("#notification").fadeOut("slow");});

  setInterval(function() {
    $.get("ping.jsp?userid=<%= userID %>",function(message) {
      if (message) $("#notification").fadeIn("slow").html(message);
    });
   ,10000);
})

the message could include a timestamp to see if you had notified earlier instead of sending an empty message if no notificati9on is needed

消息可以包含一个时间戳，以查看您是否先前已通知，而不是在不需要通知的情况下发送空消息

Alternatives: Long poll or Comet

替代方案：长期投票或彗星

#3

HTML:

HTML：

<input type="button" id="pop" value="Submit"/>
<div id="popup">
  <div id="topbar"> TITLE..</div>
  <div id="content">Here is you content...</div>
  <input type="button" id="ok" value="OK"/>
</div>

CSS:

CSS：

#popup { background:#ccc; -moz-border-radius: 10px; width:300px; height: 200px; padding: 5px; position: absolute; left: 50%; margin-left: -150px; z-index: 500; display:none }
#topbar { background:#ddd; -moz-border-radius: 10px; padding:5px; height:20px; line-height:20px }
#content { padding:5px; -moz-border-radius: 10px; text-align:center }
#ok { position: absolute; left: 140px; top: 180px }

JQUERY:

JQUERY：

$(function(){
    $('#pop').click(function(){
        $('#popup').fadeIn().css('top',$(document).height()/2);
    });
    $('#ok').click(function(){
        $('#popup').fadeOut();
    });
});

#4

Jquery ui dialog is what you are looking for. It will come in handy for you. Although there are lots of other plugin available. This is the simplest..

您正在寻找Jquery ui对话框。它会派上用场。虽然有很多其他插件可用。这是最简单的......

#1