How can I auto hide alert box after it showing it?

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 :

Show alert
Hide/terminate alert within 2 seconds

score 34 · Accepted Answer · answered Mar 17 '13 at 22:13

34

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);

answered Mar 17 '13 at 22:13

Travis J

81,153
41
202
273

thanks Travis, I need alert not custom alert – maherelghali Mar 17 '13 at 22:25
so far it's too close to the solution, i will try it. – maherelghali Mar 17 '13 at 22:27
hi am getting null on the parentNode...On the line el.parentNode.removeChild(el);.. how to fix it. – goku Jul 23 '15 at 05:08

score 4 · Answer 2 · answered Mar 17 '13 at 22:11

4

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)

answered Mar 17 '13 at 22:11

tckmn

57,719
27
114
156

2

Most popup blockers will prevent the new window from showing... – Travis J Mar 17 '13 at 22:17
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 – maherelghali Mar 17 '13 at 22:24
3

@MaherNajiEl-Ghali Then you can't. There is no way to close an alert with JS. – tckmn Mar 17 '13 at 22:25

score 2 · Answer 3 · answered Mar 17 '13 at 22:29

2

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

answered Mar 17 '13 at 22:29

Alex Shesterov

26,085
12
82
103

hmmm.. interesting , is this as mac growl ?? , i will use this resource in futur , thanks Mr.Alex – maherelghali Mar 17 '13 at 22:35
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 ) – Alex Shesterov Mar 17 '13 at 22:52

Jason Stackhouse · Answer 4 · 2014-01-24T09:43:29.190

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.

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://stackoverflow.com/a/45152906/32453 — rogerdpack, Jul 17 '17 at 20:23

How can I auto hide alert box after it showing it?

4 Answers4

Linked

Related