Javascript 如何使用 jquery 向用户显示弹出通知？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6504602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a pop up notification to the user using jquery?
提问by Amit
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。
回答by anupam
this will give a notification similar to the stackoverflow
这将给出类似于 stackoverflow 的通知
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 answeron how to listen to server updates and message load
回答by mplungjan
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
该消息可以包含一个时间戳，以查看您是否已提前通知，而不是在不需要通知时发送空消息
回答by Abdul Kader
回答by thecodeparadox
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:
查询：
$(function(){
$('#pop').click(function(){
$('#popup').fadeIn().css('top',$(document).height()/2);
});
$('#ok').click(function(){
$('#popup').fadeOut();
});
});
