如何使用jquery向用户显示弹出通知？
我正在开发一个应用程序，要求必须通知用户一些背景事件，即来自其他用户的邀请，提醒超时等。
每当事件发生时，控制器将被通知，并且应该向用户显示小窗口。
我该如何着手实现这一目标。 哪种技术/工具对我有帮助。 我正在使用jQuery，JSF 2.0和Spring 3.0。
这将给出类似于stackoverflow的通知
jQuery的
$("#notification").fadeIn("slow").append('your message'); $(".dismiss").click(function(){ $("#notification").fadeOut("slow"); }); HTML
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关于如何监听服务器更新和消息加载的答案
使用来自@ 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); })
消息可以包含一个时间戳，以查看您是否先前已通知，而不是在不需要通知的情况下发送空消息
替代方案： 长期投票或彗星
HTML：
TITLE.. Here is you content...
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：
$(function(){ $('#pop').click(function(){ $('#popup').fadeIn().css('top',$(document).height()/2); }); $('#ok').click(function(){ $('#popup').fadeOut(); }); });
您正在寻找Jquery ui对话框。 它会派上用场。 虽然有很多其他插件可用。 这是最简单的……