How to create popup modal or popup message box with time countdown in javascript

The general algorithm of creating a popup modal box

1. Design a pop-up box using HTML and CSS
   1. Use CSS position property
   2. For animation(slow, fast) use CSS transaction property
   3. Hide your modal box using CSS display none property
2. Show popup modal box after a click
   1. To do something after the click use the javascript click event
   2. To show popup modal, add CSS display block property to your modal using javascript.
3. Close popup modal after the click
   1. After clicking the close button, add CSS display none property using javascript
4. Show popup modal automatically
   1. Use javascript setTimeout method to show popup modal automatically
   2. Add CSS display block property using setTimeout method.
5. Close popup modal automatically
   1. Again User javascript setTimeout method to close popup modal automatically
   2. Add CSS display none property using setTimeout method
6. Add time countdown on popup modal box
   1. Use javascript setInterval method to update time
   2. Call your update time method after every second continuously using the setInterval method
   3. When the time will match your condition call your show and hide methods to show and hide popup modal.

How to Create popup modal in HTML

Try to keep it simple, if your pop-up message contains only an image then take a div, and inside the div keep your image also if you want to close your popup modal after a click takes a button inside the div. To make your control(js) easy you can use id to your main div and your close button.

Suggestion: HTML provides a cool dialog tag to create this kind of pop-up message box you can use this if you want.

modals html

<div id="my-popup">
	<button id=”close-bnt”>X</button>
	// your content goes here
</div>
	

How to Design popup modal in CSS

Give a fixed size and width to your popup modal, then if you want to keep your message box above all the content you need to use CSS position(absolute) and z-index property.

Hiding the popup modal box using css

most of the time we want to keep our pop-up message box hide for the first time. So to did this, use CSS display property, don't do this using js for hiding the first time hiding.

modals css

#my-popup{
	Width: 600px;
	Height: 400px;
	Background: gray;
	Box-sizing: border-box; /* for inside padding */
	Padding: 10px;

	/* for center */
	Position:absolute;
	top:50%;
	left:50%;
	Transform: translate(-50%,-50%);

	/* for hider */
	display:none;
}
	

Show popup modal box using javascript

We already know, we just hide our modal using CSS display none property. Now to show the popup modal box we just need to change the display none to display block. So to show the popup modal using javascript we will apply CSS to our popup modal using javascript.

javascript open popup modal box

function showPopUp(){
	my_popup.style.display="block";
}

Close popup modal box using javascript

To hide the popup modal box using javascript we need to apply CSS display none to our popup modal div using javascript.

javascript close popup modal box

function hidePopUp(){
	my_popup.style.display="none";
}

Automatically show popup modal box using javascript

To show something you need to use the CSS display block property, and automatically means after our website load or after some specific(defined) time CSS display property will apply to our popup modal box. Now to do something after a specific amount of time or automatically we can use the javascript 'setTimeout" method, this function takes two parameters first one is a callback function or code and the second one is the waiting time(in milliseconds).

javascript open popup modal box automatically

function showPopUp(){
	my_popup.style.display="block";
}
setTimeout(showPopUp,60000);

Note: in this case, the "showPopUp" function will call automatically after 60000 milliseconds or 1 minute.

Close popup modal box automatically using javascript

To close your popup modal box automatically you need to set CSS display none automatically. So you can also use the "setTimeout" method. make sure you use waiting time technically.

javascript close popup modal box automatically

function ClosePopUp(){
	my_popup.style.display="none";
}
setTimeout(ClosePopUp,120000)

Note: in this case, the "ClosePopUp" function will call automatically after 120000 milliseconds or 2 minutes.

Tips
1 secound = 1000 milliseconds
1 minute = 60000 milliseconds

Close popup modal box after clicking the close button

The most common technique of closing a popup modal is clicking a button, and it is so easy to just call your close function (ClosePopUp) after the close button click.

javascript close popup modal after click

<button onclick="ClosePopUp()">Close</button>
function ClosePopUp(){
	my_popup.style.display="none";
}

Time Countdown to show or hide a popup modal

Countdown time in javascript is easy but you need to handle it technically. If you think deeply, you will find, the countdown time scenario is just updating a number every second. And if you want to do something based on count downtime you can check the number after updating every time.

Now suppose we want to hide our popup modal after 10 seconds automatically by showing the time countdown, we need to update a number from 1 to 10. That means we need to call a function (updatOurTme) continuously for every 1 second until our number becomes 10.

To call a function continuously for a specific time javascript provides the setInterval method, this method takes two parameters first one is our update function and the second one is time.

javascript time countdown to close a popup modal

var time_in_sec = 0;
var start_calling = ‘’;
function showPopUp(){
 // start time update after popup modal show	
  start_calling = setInterval(countdownTime,1000); // call every one sec
 }

function countdownTime(){
  time_in_sec++;
  html_tag.innerHTML = time_in_sec; // show time in html tag
  if(time_in_sec == 10){
clearInterval(start_calling) // stop calling
ClosePopUp();;
  }
}
function ClosePopUp(){
	// close popup modal
}