JavaScript alert box with timer

If you want an alert to appear after a certain about time, you can use this code:

setTimeout(function() { alert("my message"); }, time);

If you want an alert to appear and disappear after a specified interval has passed, then you're out of luck. When an alert has fired, the browser stops processing the javascript code until the user clicks "ok". This happens again when a confirm or prompt is shown.

If you want the appear/disappear behavior, then I would recommend using something like jQueryUI's dialog widget. Here's a quick example on how you might use it to achieve that behavior.

var dialog = $(foo).dialog('open');
setTimeout(function() { dialog.dialog('close'); }, time);

setTimeout( function ( ) { alert( "moo" ); }, 10000 ); //displays msg in 10 seconds

In short, the answer is no. Once you show an alert, confirm, or prompt the script no longer has control until the user returns control by clicking one of the buttons.

To do what you want, you will want to use DOM elements like a div and show, then hide it after a specified time. If you need to be modal (takes over the page, allowing no further action) you will have to do additional work.

You could of course use one of the many "dialog" libraries out there. One that comes to mind right away is the jQuery UI Dialog widget

Pure HTML + CSS 5 seconds alert box using the details element toggling.

details > p {
  padding: 1rem;
  margin: 0
}

details[open] {
  visibility: hidden;
  position: fixed;
  width: 33%;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  transform-origin: center center;
  outline: 10000px #000000d4 solid;
  animation: alertBox 5s;
  border: 15px yellow solid
}

details[open] summary::after {
  content: '❌';
  float: right
}

@keyframes alertBox {
  0%   { visibility: unset}
  100% { visibility: hidden }
}

<details>
  <summary>Show the box 5s</summary>
  <p>HTML and CSS popup with 5s tempo.</p>
  <p><b>Powered by HTML</b></p>
</details>

Nb: the visibility stay hidden at closure, haven't found a way to restore it from CSS, we might have to use js to toggle a class to show it again. If someone find a way with only CSS, please edit this post!!

by using this code you can set the timer on the alert box , and it will pop up after 10 seconds.

setTimeout(function(){
         alert("after 10 sec i will start");
         },10000);