How can I auto hide alert box after it showing it? [duplicate]

Question

All I want to do is, how can I auto hide alert box within specific seconds after showing it?

All I know is,

setTimeout(function() { 
      alert('close'); 
}, 5000);

// This will appear alert after 5 seconds

No need for this I want to disappear alert after showing it within seconds.

Needed scenario :

1. Show alert

2. Hide/terminate alert within 2 seconds

Crosse

Answer 1

tldr; jsFiddle Demo

This functionality is not possible with an alert. However, you could use a div

function tempAlert(msg,duration)
{
 var el = document.createElement("div");
 el.setAttribute("style","position:absolute;top:40%;left:20%;background-color:white;");
 el.innerHTML = msg;
 setTimeout(function(){
  el.parentNode.removeChild(el);
 },duration);
 document.body.appendChild(el);
}

Use this like this:

tempAlert("close",5000);

Radian

thanks Travis, I need alert not custom alert – Crosse

so far it's too close to the solution, i will try it. – Crosse

hi am getting null on the parentNode...On the line el.parentNode.removeChild(el);.. how to fix it. – Paramedic

Answer 2

You can't close an alert box with Javascript.

You could, however, use a window instead:

var w = window.open('','','width=100,height=100')
w.document.write('Message')
w.focus()
setTimeout(function() {w.close();}, 5000)

Pythoness

Most popup blockers will prevent the new window from showing... – Radian

Thank you very much for your support mr.DoorKnob , but i need alert itself not a custom alert example: 1- show alert 2- hide alert after 2 seconds – Crosse

@MaherNajiEl-Ghali Then you can't. There is no way to close an alert with JS. – Pythoness

Answer 3

impossible with javascript. Just as another alternative to suggestions from other answers: consider using jGrowl: http://archive.plugins.jquery.com/project/jGrowl

Penzance

hmmm.. interesting , is this as mac growl ?? , i will use this resource in futur , thanks Mr.Alex – Crosse

yes, it's a jQuery plugin which shows messages looking like growl-messages. It is stylable and flexible. The "disappear after n seconds" behaviour, as well as permanent messages are built-in. Give it a try ) – Penzance

Answer 4

You can also try Notification API. Here's an example:

function message(msg){
    if (window.webkitNotifications) {
        if (window.webkitNotifications.checkPermission() == 0) {
        notification = window.webkitNotifications.createNotification(
          'picture.png', 'Title', msg);
                    notification.onshow = function() { // when message shows up
                        setTimeout(function() {
                            notification.close();
                        }, 1000); // close message after one second...
                    };
        notification.show();
      } else {
        window.webkitNotifications.requestPermission(); // ask for permissions
      }
    }
    else {
        alert(msg);// fallback for people who does not have notification API; show alert box instead
    }
    }

To use this, simply write:

message("hello");

Instead of:

alert("hello");

---

Note: Keep in mind that it's only currently supported in Chrome, Safari, Firefox and some mobile web browsers (jan. 2014)

Find supported browsers here.

Accrual

This doesn't seem to work in "today's Chrome" however it may have been replaced by the new Notification API which somewhat fits the bill, great idea, inspired this answer: https://mcmap.net/q/121439/-javascript-close-alert-box – Nurse