Popup notification using JavaScript and CSS that will hide after a certain time
By Faruque Ahamed MollickWe often find popup notifications on many websites or web-based front-end application that hides after a certain amount of time automatically. Today we are going to make our own popup notification using CSS and JavaScript and also hide or disable automatically.
The main functionality to show popup messages is going to be done by using browser-side JavaScript. But we will add some style to give it a better look. For this, we will first write our CSS code.
Let’s start with our CSS code:
.cs-popup {
display: none;
position: fixed;
z-index: 999;
background-color: rgba(43, 41, 41, 0.48);
padding-top: 100px;
overflow: auto;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.cs-popup-content {
background-color: #ffffff;
width: 80%;
padding: 16px;
margin: auto;
border: 1px solid #888;
}
.cs-popup-close {
color: #ffffff;
background-color: red;
margin-top: -12px;
font-weight: bold;
padding: 4px;
padding-top: 0;
padding-bottom: 0;
float: right;
font-size: 1.5em;
}
.cs-popup-close:hover,
.cs-popup-close:focus {
cursor: pointer;
color: #ccc;
background-color: #ec4949;
}Now below is the HTML code:
<div id="cs-popup-area"></div>
Now let’s create our JavaScript function. Below is the JavaScript code:
function call_cs_popup(text,time,color,background)
{
var html_content = '<div id="cs-popup-container" class="cs-popup"><div style="color:'+color+';background-color:'+background+';" class="cs-popup-content"><span class="cs-popup-close">×</span>'+text+'</div></div>';
document.getElementById('cs-popup-area').innerHTML = html_content;
var popup = document.getElementById('cs-popup-container');
var span = document.getElementsByClassName("cs-popup-close")[0];
popup.style.display = "block";
span.onclick = function() {
popup.style.display = "none";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}
if (time != 0) {
setTimeout(function(){
popup.style.display = "none";
}, time);
}
}
How to use it?
Below is the usage of the JavaScript function that we have just created:
call_cs_popup( "My modal text oho eco go momo holoaku lorem ipsum", // notification text 2100, // Hide our notification after certain time. Set to 0 for disable auto hiding '#000000', // Text color 'red' // Background color. We can also use CSS color code );
In the above code, we have called the JavaScript function that we have just created. Now if we test it on our browser then we will see a popup notification containing our text and after 3 seconds it will disappear. We have set the time for 3000 milliseconds or 3 seconds. So it is disappearing after 3 seconds. Setting the time to 0 will disable the auto-hiding of the popup notification. In that case, the popup notification message will exist until we close it by clicking the “X” on the top right corner of the popup notification box.
Complete and final code in a single HTML file
Below is given the complete and final code in a single HTML file for the above steps:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.cs-popup {
display: none;
position: fixed;
z-index: 999;
background-color: rgba(43, 41, 41, 0.48);
padding-top: 100px;
overflow: auto;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.cs-popup-content {
background-color: #ffffff;
width: 80%;
padding: 16px;
margin: auto;
border: 1px solid #888;
}
.cs-popup-close {
color: #ffffff;
background-color: red;
margin-top: -12px;
font-weight: bold;
padding: 4px;
padding-top: 0;
padding-bottom: 0;
float: right;
font-size: 1.5em;
}
.cs-popup-close:hover,
.cs-popup-close:focus {
cursor: pointer;
color: #ccc;
background-color: #ec4949;
}
</style>
</head>
<body>
<div id="cs-popup-area"></div>
<script type="text/javascript">
function call_cs_popup(text,time,color,background)
{
var html_content = '<div id="cs-popup-container" class="cs-popup"><div style="color:'+color+';background-color:'+background+';" class="cs-popup-content"><span class="cs-popup-close">×</span>'+text+'</div></div>';
document.getElementById('cs-popup-area').innerHTML = html_content;
var popup = document.getElementById('cs-popup-container');
var span = document.getElementsByClassName("cs-popup-close")[0];
popup.style.display = "block";
span.onclick = function() {
popup.style.display = "none";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}
if (time != 0) {
setTimeout(function(){
popup.style.display = "none";
}, time);
}
}
// Call the function
call_cs_popup(
"My modal text oho eco go momo holoaku lorem ipsum", // notification text
2100, // Hide our notification after certain time. Set to 0 for disable auto hiding
'#000000', // Text color
'red' // Background color. We can also use CSS color code
);
</script>
</body>
</html>
Disable HTML button after clicking on it in JavaScript
How to check the internet connection status in JavaScript
That’s it. We have created a simple and easy-to-use popup notification tool that we can use it on our web page just by calling our popup notification JavaScript function.
Leave a Reply