Popup Notification like Facebook using Jquery and CSS

Are you looking for popup Notification like Facebook, This Post will explain the functions and css. Here you are going to learn html css and jquery functions for popup notification. The popup Notification is one of the needed for all social sites projects and database back ends.  So here we go with basic code and live demo functions.

Demo Here                                              Download Here

Step 1: Create Html file for menu bar named as index.php

<ul id="nav">
  
    <li><a href="#s1">Menu 4</a>
       </li>

    <li><a href="#s2">Menu 3</a>

    </li>
    <li><a href="#">Menu 2</a></li>
   
	<li id="notify_li">
<span id="msg_count">3</span>
<a href="#" id="notifylink">Notifications</a>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="content"><img src="https://pbs.twimg.com/profile_images/624483066795290624/U_Qn1xLH_bigger.jpg" width="50px" height="50px" alt="profpic"> Developerdesks shared about something</div>
<div class="content"><img src="https://pbs.twimg.com/profile_images/624483066795290624/U_Qn1xLH_bigger.jpg" width="50px" height="50px" alt="profpic"> Developerdesks liked page developerdesks</div>
<div class="content"><img src="https://pbs.twimg.com/profile_images/624483066795290624/U_Qn1xLH_bigger.jpg" width="50px" height="50px" alt="profpic"> Developerdesks comment something</div>
</div>
<div id="notificationFooter"><a href="#">See All</a></div>
</div>

</li>
    <li><a href="#">Home</a></li>
   
</ul>

Step 2: Create css File for design style.css

html {
    background-color: #E9EAED;
    height: 100%;
}
body {
    color: #333333;
    font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
}

#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: rgb(78,105,162);
    background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1)));
    background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);

    border-bottom: 1px solid #3A4B7B;
    height: 22px;
    padding: 10px 0 10px 5px;
    position: relative;
}
#nav > li {
    float: right;
    height: 22px;
    padding-right: 6px;
    position: relative;
    text-align: left;
}
#nav > li > a {
    border: 1px solid transparent;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    margin: -3px 0 0 -1px;
    padding: 0 1px 0 11px;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #425691;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    margin-right: -8px;
    padding: 0 9px 0 11px;
    position: relative;
    z-index: 1;
}
#nav > li.subs:hover > a {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-bottom-width: 0;
    border-radius: 2px 2px 0 0;
    color: #000000;
    text-shadow: 0 0 transparent;
    z-index: 2;
}
#notify_li{position:relative}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: -1;
display: none;
}
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle {
z-index: 1000;
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody {
padding: 2px 0px 0px 0px !important;
min-height:300px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}
#msg_count {
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}
.content {
    padding-left: 10px;
	}

Step 3: create jquery function for popup.

<script type="text/javascript" >
$(document).ready(function()
{
$("#notifylink").click(function()    // onclick function for notification
{
$("#notificationContainer").fadeToggle(300);   // show notification div
$("#msg_count").fadeOut("slow");
return false;
});

//Document Click
$(document).click(function()
{
$("#notificationContainer").hide();     // hide notification div
});
//Popup Click
$("#notificationContainer").click(function()
{
return false
});

});
</script>

Add javascript into the index page. This javascript is basic hide and show script.  If you know the Basic javascript you can easily do this with your own idea. onlcik ‘show’  function show the Notification div, and the ‘hide’ function  hide the notification div.

step 4: Add library function for javascript

<script type="text/javascript" src="js/jquery.min.js"></script>

That’s It, enjoy the coding.