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

Posted 2023-02-23

【中文标题】如何使用 jquery 向用户显示弹出通知？

【英文标题】：How to display a pop up notification to the user using jquery?

【发布时间】：2011-09-24 04:17:58

【问题描述】：

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

每当事件发生时，控制器都会收到通知，并且应该向用户显示一个小窗口。

我应该如何继续实现这一目标。哪种技术/工具会帮助我。我正在使用 jQuery、JSF 2.0 和 Spring 3.0。

【参考方案1】：

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

【讨论】：

其实看其他例子，这里根本不需要jQuery UI。

【参考方案2】：

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

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's answer，了解如何监听服务器更新和消息加载

【讨论】：

@mplungjan 太好了，但现在我注意到，OP 也要求服务器端帮助

所以脚本需要轮询服务器。没什么大不了的。 setInterval 和 $.get()

是的，我会更新我的答案。顺便说一句，我想知道有没有什么方法可以在不使用 setInterval() 的情况下实现这一点，我的意思是由其他逻辑触发的事件？

Long poll 或 Comet

【参考方案3】：

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：

#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();
    );
);

【讨论】：

修复 css ID 弹出窗口 - 添加一个 fiddle 减去弹出高度可能也是一个好主意

【参考方案4】：

使用来自@Anu's suggestion - my fiddle 的代码，您可以简单地添加投票

$(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);
)

消息可以包含时间戳，以查看您是否之前通知过，而不是在不需要通知时发送空消息

替代方案：Long poll 或 Comet