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

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

Using code from @Anu's suggestion - my fiddle, you can simply add a poll

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

Alternatives: Long poll or Comet

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