Notifications Popup

HTML

<div class="div-right">
<a id='notification-link' class='block' href='#'>
    <img src='https://cdn-images-1.medium.com/max/1600/1*c3cQvYJrVezv_Az0CoDcbA.jpeg' alt='Notifications' />
</a>
</div>
<div class='notification-popup-container-main'>
<div class='notification-popup-container'>
    <div class='notification-popup-body'>
        <div class="notification-popup-title">TITLE 1</div>
        <div class="notification-popup-message">MESSAGE 1</div>
    </div>
</div>
<div class='notification-popup-container'>
    <div class='notification-popup-body'>
        <div class="notification-popup-title">TITLE 2</div>
        <div class="notification-popup-message">MESSAGE 2</div>
    </div>
</div>
<div class='notification-popup-container'>
    <div class='notification-popup-body'>
        <div class="notification-popup-title">TITLE 3</div>
        <div class="notification-popup-message">MESSAGE 3</div>
    </div>
</div>
</div>

CSS

.div-right {
	float: right;
	padding-top: 8px;
}

.block {
	display:table;	
	padding: 3px;
}
.notification-popup-container-main {
position: absolute;
  right:10px;
    top: 50px;
}
.notification-popup-container {
    background-color: #fff;
    border: 1px solid rgba(100, 100, 100, .4);
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    overflow: visible;
    display: none;
}

.notification-popup-body {
    padding: 10px 0px 0px 0px !important;
}

JavaScript

$(function() {
    var nContainer = $(".notification-popup-container");

    //notification popup
    $("#notification-link").click(function() {
        nContainer.toggle();
        return false;
    });

    //page click to hide the popup
    $(document).click(function() {
        nContainer.hide();
    });

    //popup notification bubble on click
    nContainer.click(function() {
        return false;
    });
});