¿Cómo mostrar una notificación emergente al usuario que usa jquery?

Question

Estoy desarrollando una aplicación que requiere que el usuario debe ser notificada acerca de algunos eventos de fondo, es decir, invitación de otro usuario, tiempo de aviso fuera, etc.

Cada vez que se produce el evento al controlador será notificado, y una pequeña ventana se debe mostrar para el usuario.

Cómo debo proceder para lograr esto. ¿Qué tecnología/herramienta me ayudará? Estoy usando jQuery, JSF 2.0 y Spring 3.0.

Answer 1

esto le dará una notificación similar a la 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 
} 

también echar un vistazo a mplungjan's answer sobre cómo escuchar a las actualizaciones del servidor y carga de mensajes

Answer 2

Jquery ui dialog es lo que estás buscando. Te será útil. Aunque hay muchos otros plugins disponibles. Este es el más simple ..

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

Answer 4

Mediante el código de @Anu's suggestion - my fiddle, simplemente puede añadir un sondeo

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

el mensaje podría incluir una marca de tiempo para ver si se había notificado anteriormente en lugar de enviar un mensaje vacío si no se necesita ninguna notificación

Alternativas: Long poll o Comet