Javascript close alert box
Asked Answered
F

12

45

I want to be able to close an alert box automatically using Javascript after a certain amount of time or on a specific event (i.e. onkeypress). From my research, it doesn't look like that's possible with the built-in alert() function. Is there a way to override it and have control over the dialog box that it opens?

Also, I don't want an override that shows a hidden div as the alert. I need an actual dialog box.

Frumpish answered 20/1, 2009 at 22:18 Comment(0)
J
24

As mentioned previously you really can't do this. You can do a modal dialog inside the window using a UI framework, or you can have a popup window, with a script that auto-closes after a timeout... each has a negative aspect. The modal window inside the browser won't create any notification if the window is minimized, and a programmatic (timer based) popup is likely to be blocked by modern browsers, and popup blockers.

Jacob answered 20/1, 2009 at 23:43 Comment(0)
S
11

Appears you can somewhat accomplish something similar with the Notification API. You can't control how long it stays visible (probably an OS preference of some kind--unless you specify requireInteraction true, then it stays up forever or until dismissed or until you close it), and it requires the user to click "allow notifications" (unfortunately) first, but here it is:

If you want it to close after 1s (all OS's leave it open 1s at least):

var notification = new Notification("Hi there!", {body: "some text"});
setTimeout(function() {notification.close()}, 1000);

If you wanted to show it longer than the "default" you could bind to the onclose callback and show another repeat notification I suppose, to replace it.

Ref: inspired by this answer, though that answer doesn't work in modern Chrome anymore, but the Notification API does.

Sensitize answered 17/7, 2017 at 20:13 Comment(1)
The requireinteraction flag is also "supposed" to make it stay up indefinitely (until they close it or you do with the #close method) FWIW (on OS .X default timeout is 5s FWIW)Sensitize
M
7

no control over the dialog box, if you had control over the dialog box you could write obtrusive javascript code. (Its is not a good idea to use alert for anything except debugging)

Murielmurielle answered 20/1, 2009 at 22:23 Comment(4)
Now... I'll admit I still do it from time to time but... really? Alert for debugging? You're advocating that?Kammerer
alert() is perfect for debugging. Last time I used it during writing userjs on my iPad @ office. God bless alert()! :)Demicanton
I find both alert and console.log to be helpful in different situations. Never use alert(); within a loop though. Nice way to crash a computer :)Florenceflorencia
"no good for anything except debugging" != advocating lolShanney
M
4

I want to be able to close an alert box automatically using javascript after a certain amount of time or on a specific event (i.e. onkeypress)

A sidenote: if you have an Alert("data"), you won't be able to keep code running in background (AFAIK)... . the dialog box is a modal window, so you can't lose focus too. So you won't have any keypress or timer running...

Mainstay answered 20/1, 2009 at 22:27 Comment(3)
My alert box would be fired by an asynchronous event, so this should not be a problem (in theory).Frumpish
JavaScript isn't asynchronous. Calling alert/confirm/prompt freezes all script processing (and indeed often the entire web browser) until the user answers.Kwashiorkor
@Kwashiorkor JavaScript does allow asynchronous behavior; but it is not multithreaded. If the thread freezes in a block of code --- asynchronous or not --- all code will be frozen at that point.Avie
S
3

Try boot box plugin.

var alert = bootbox.alert('Massage')
alert.show();
setTimeout(function(){alert.modal('hide'); }, 4000);
Seiter answered 1/9, 2017 at 9:39 Comment(0)
M
2

I guess you could open a popup window and call that a dialog box. I'm unsure of the details, but I'm pretty sure you can close a window programmatically that you opened from javascript. Would this suffice?

Moffat answered 20/1, 2009 at 22:23 Comment(1)
Nice work around, but OP wanted alert dialog only. But this should do for those who want control over dialogs. +1Emmalynne
R
2

The only real alternative here is to use some sort of custom widget with a modal option. Have a look at jQuery UI for an example of a dialog with these features. Similar things exist in just about every JS framework you can mention.

Radiochemistry answered 20/1, 2009 at 22:36 Comment(3)
I know, but unfortunately, it's really the only way to handle this stuff in JavaScript.Radiochemistry
No need to get annoyed, you asked a question and I said it couldn't be done, which it can't, and offered an alternative.Radiochemistry
Wow... years later, I can't believe how much of an idiot I was. Sorry I was such an ass when all you were trying to do was help.Frumpish
D
0

If you do it programmatically in JS it will be like reinventing the wheel. I recommend using a jQuery plugin called jGrowl

Diagnostics answered 20/1, 2009 at 22:24 Comment(1)
jGrowl simply displays an inline div. I need a dialog box. Thanks though.Frumpish
S
0

Maybe Use The HTML Dialog Tag

I arrived at this question / answers while looking for the same, and I found an alternative on W3Schools using the dialog. I modified their example a fair amount to automate the opening and closing. The dialog tag usage is shown in the HTML / JavaScript below. Herein, I use setTimeouts for the opening and closing. I plan to replace the setTimeouts with JavaScript functions that open the dialog before a fetch is called, and closing the dialog will happen when a promise, that takes longer to fulfill, IS fulfilled.

<!DOCTYPE html>
<html>
  <body>
    <h1>The HTML Dialog Object</h1>
        <dialog id="myDialog">This is a dialog window</dialog>
    <h2>The Dialog will open 3 seconds after window load and close, 5 seconds after first showing, on it's own</h2>

    <script>
      function showDialog(dialog) {
        dialog.show();
        closeDialog(dialog);
      }

      function closeDialog(dialog) {
        setTimeout(function () {
          dialog.close();
        }, 5000);
      }

      function init() {
        setTimeout(function () {
          const dialog = document.getElementById("myDialog");
          showDialog(dialog);
        }, 3000);
      }

      init();
    </script>
  </body>
</html>

Wish I could show a video of this, but this code will run in your VS Code Live Server just as it is.

Samphire answered 8/9, 2023 at 0:30 Comment(0)
S
-2

You actually can do this you can basically listen for this pop up to happen and then confirm true before it ever "pops up",

if(window.alert){
  return true
}
Stearic answered 6/11, 2019 at 18:23 Comment(0)
M
-3

You can use label and set its fade in and out time for e.g Hide it initially and show on click. $('#div_Message').fadeIn(500).delay(1000).fadeOut(1500);

Mixologist answered 27/2, 2012 at 6:7 Comment(0)
A
-5
window.setTimeout('alert("Message goes here");window.close();', 5000);
Aesthete answered 20/7, 2017 at 17:15 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.