how to create a simple web popup notifier using vanilla javascript and jquery

Having a popup notifier on your website or web applications can help keep your website visitors informed on what's new or serve ads as they browse your site. In this tutorial we will create a simple popup notifier.

Prerequisite

In this tutorial, we will make use of Html, CSS, JavaScript and some Jquery.

HTML

 <div id="popup" onmouseover="mouseIn()" onmouseout="mouseOut()">
<div id="popup-in">
<p><b>Notification</b></p>
<p id="popup-message"></p>
</div>
</div>
              

CSS

 #popup {
position: fixed; /*Gives the notifier a fixed position*/
z-index: 13; /*Places the notifier on top of all elements with a lesser z-index*/
background: #36a9d6;
margin: 10px;
border-radius: 5px;
width: 200px;
padding: 10px 0;
display: none;
cursor: pointer;
}

#popup-in {
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #f4f4f4;
}
              

JAVASCRIPT

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function element(id) {
return document.getElementById(id);
}

//adds an event listener on a button that displays notification
element("showNotification").addEventListener("click", function () {
showPopup("You've got Mail");
});

//holds timeout information
var myVar;

//displays the notifier
function showPopup(message) {
//includes the message in the notifier
$("#popup-message").html(message);

//makes the notifier visible
$("#popup").fadeIn();

//sets 5 seconds timeout
myVar = setTimeout(function () {
$("#popup").fadeOut();
}, 5000);
}

//clears Timeout when mouse is in the notifier area
function mouseIn() {
clearTimeout(myVar);
$("#popup").fadeIn();
}

//adds Timeout when mouse is out of the notifier area
function mouseOut() {
myVar = setTimeout(function () {
$("#popup").fadeOut();
}, 5000);
}
</script>
              

Conclusion

Creating a simple web notifier is pretty straight forward. How you popup the notifier may vary depending on the type of website you are creating. Thanks for coming, see you in the next tutorial.