How To Display A Pop Up Notification To The User Using Jquery?

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 oc

Solution 1:

this will give a notification similar to the stackoverflow

jQuery

$("#notification").fadeIn("slow").append('your message');
$(".dismiss").click(function(){
       $("#notification").fadeOut("slow");
});

HTML

<divid="notification"style="display: none;"><spanclass="dismiss"><atitle="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;
}
#notificationspan.dismiss {
    border:2px solid #FFF;
    padding:05px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notificationa {
    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

Solution 2:

HTML:

<inputtype="button"id="pop"value="Submit"/><divid="popup"><divid="topbar"> TITLE..</div><divid="content">Here is you content...</div><inputtype="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();
    });
});

Solution 3:

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

Solution 4:

Jquery ui dialog is what you are looking for. It will come in handy for you. Although there are lots of other plugin available. This is the simplest..