Como mostrar uma notificação pop-up para o usuário usando jquery?

estou a desenvolver uma aplicação que exige que o Utilizador seja notificado sobre alguns eventos de fundo, ou seja, convite de outro utilizador,tempo de chamada de atenção, etc.

sempre que o evento ocorrer, o controlador será notificado, e uma pequena janela deverá ser apresentada ao utilizador.

Como devo proceder para conseguir isso? Que Tecnologia / ferramenta vai me ajudar. Estou a usar jQuery, JSF 2.0 e Spring 3.0.

Author: Amit, 2011-06-28
Source

4 answers

Isto dará uma notificação semelhante ao 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
}

Veja também a resposta do mplungjan sobre como ouvir as actualizações do servidor e a carga de mensagens

 22
Author: anu, 2017-05-23 12:26:14

Usando o código de a sugestão de@Anu-o meu violino , pode simplesmente adicionar uma sondagem 

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

A mensagem poderia incluir uma data para ver se tinha notificado mais cedo em vez de enviar uma mensagem vazia, caso não fosse necessária uma notificação

Alternativas: sondagem Longa ou Cometa

 2
Author: mplungjan, 2011-06-28 12:41:34

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();
    });
});
 1
Author: thecodeparadox, 2011-06-28 11:00:09

O diálogo de Jquery ui é o que procura. Vai dar-te jeito. Embora haja muitos outros plugin disponíveis. Isto é o mais simples..

 1
Author: Abdul Kader, 2011-06-28 13:24:38