Popup notification using JavaScript and CSS that will hide after a certain time

We often find popup notification on many websites. Today we are going to make our own popup notification using CSS and JavaScript.

The popup notification JavaScript function we are going to create is easy to use. Here we will create an easy to use JavaScript function, some CSS code and a div element with ID “cs-popup-area”.

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>

After that we are going to 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">&times;</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 our 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 our 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.



Disable HTML button after clicking on it in JavaScript

How to check the internet connection status in JavaScript


That’s it. We have created our 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

Your email address will not be published. Required fields are marked *