Detect if an alert or confirm is displayed on a page

Question

Is there a way using JavaScript or jQuery to detect if a confirm or alert box is being displayed?

Answer 1

No there is not. You can check that the return value of a confirm command is indeed true or false but you cant check whether there visually there.

These things are part of the browser not part of the DOM. I'm sure there's a dirty hack that works for IE because it's a bastardized child of the windows OS.

Answer 2

Confirm and alert boxes are blocking events - Javascript code execution is halted while these are displayed. So no - you can not detect if one is currently being displayed, as far as I know.

Answer 3

If you wanted to run some code when an alert() fires, you could try something like this:

I've only tested in Chrome, so I'm not sure about browser support.

Example: http://jsfiddle.net/Q785x/1/

(function() {
    var _old_alert = window.alert;
    window.alert = function() {
                     // run some code when the alert pops up
        document.body.innerHTML += "<br>alerting";
        _old_alert.apply(window,arguments);
                     // run some code after the alert
        document.body.innerHTML += "<br>done alerting<br>";
    };
})();

alert('hey');
alert('you');
alert('there');

Of course this only lets you run code before and after an alert. As @kander noted, javascript execution is halted while the alert is displayed.

Answer 4

To add to @user113716's answer you can rely on time. I assume that if confirm dialog took less than 200 ms, it is blocked by browser. Below I return true if confirm dialog is blocked (by default it returns false, the code is in TypeScript).

    let oldConfirm = window.confirm;
    window.confirm = (msg) => {
        let time = new Date().getTime();
        let conf = oldConfirm(msg);

        return new Date().getTime() - time > 200 ? conf : true;
    }

Answer 5

If you want to detect if these are being blocked. You will have to do your own thing with the message you will be dispalying but override the native alert/confirm.

window.nativeAlert = window.alert;
window.alert = function (message) {
var timeBefore = new Date();
var confirmBool = nativeAlert(message);
var timeAfter = new Date();
if ((timeAfter - timeBefore) < 350) {
    MySpecialDialog("You have alerts turned off, turn them back on or die!!!");
  }
}

window.nativeConfirm = window.confirm;
window.confirm = function (message) {
var timeBefore = new Date();
var confirmBool = nativeConfirm(message);
var timeAfter = new Date();
if ((timeAfter - timeBefore) < 350) {
    MySpecialDialog("You have alerts turned off, turn them back on or die!!!");
}
 return confirmBool;
}

Obviously I have set the time to 3.5 milliseconds. But after some testing we were only able to click or close the dialogs in about 5 milliseconds plus

Answer 6

You could do this if you want to...

(function () {

    // remember the normal alert
    var oldAlert = (function(){ return this.alert; }()),
        oldConfirm = (function(){ return this.confirm; }());

    // inject ourself into the window.alert and window.confirm globals
    alert = function (msg) {
        oldAlert.call(document, msg);
        document.onAlert(msg);
    };
    confirm = function (msg) {
        var result = oldConfirm.call(document, msg);
        document.onConfirm(msg, result);
        return result;
    };

    // these just chill and listen for events
    document.onAlert = function (msg) {
        window.console && console.log('someone alerted: ' + msg);
    };
    document.onConfirm = function (msg) {
        window.console && console.log('someone was asked: ' + msg);
        window.console && console.log('and they answered: ' + (msg ? 'yes' : 'no'));
    };

}());

The downside to this is that

• you're hacking a host method of a browser (stuff you shouldn't typically do - http://perfectionkills.com/whats-wrong-with-extending-the-dom/)
• you should just be better keeping track of your alert() confirm() usage, haha