Notifications Popup TABLE
HTML
<a id='notification-link' href='#'>
<img src='http://docs.blackberry.com/en/smartphone_users/deliverables/50635/mwa1358788933767_lowres_en-us.png' alt='Notifications' />
</a>
<table class="notification-popup-container-main">
<tbody>
<tr class="notification-popup-container">
<td class="notification-type">
<div>TYPE TYPE</div>
</td>
<td class="notification-popup-body">
<div class="notification-popup-title">TITLE</div>
<div class="notification-popup-message">MESSAGE</div>
</td>
</tr>
<tr class="notification-popup-container">
<td class="notification-type">
<div>TYPE TYPE</div>
</td>
<td class="notification-popup-body">
<div class="notification-popup-title">TITLE</div>
<div class="notification-popup-message">MESSAGE</div>
</td>
</tr>
<tr class="notification-popup-container">
<td class="notification-type">
<div>TYPE TYPE</div>
</td>
<td class="notification-popup-body">
<div class="notification-popup-title">TITLE</div>
<div class="notification-popup-message">MESSAGE</div>
</td>
</tr>
</tbody>
</table>
CSS
.notification-popup-container-main {
position: absolute;
top: 55px;
left: 30px;
}
.notification-popup-container {
background-color: #fff;
border: 1px solid black;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
width: 400px;
z-index: 99;
}
/* New styling */
.notification-popup-container td {
border: 1px solid black;
}
.notification-popup-body {
padding: 10px 0px 0px 0px !important;
}
.notification-type {
background-color: red;
}
JavaScript
$(function () {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function () {
nContainer.fadeToggle(300);
return false;
});
//page click to hide the popup
$(document).click(function () {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function () {
return false;
});
});