How to display a pop up notification to the user using jquery?

Question

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.

Answer 1

this will give a notification similar to the 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 } 

Also take a look at mplungjan's answer on how to listen to server updates and message load

Answer 2

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